Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Building a Navbar

Posted by Cool Beans
Cool Beans
6,937 Points

I need help with navbar positioning

here's my code:

<!DOCTYPE html> <html lang="en"> <head> <title>Full Stack Conf</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</head> <body> <nav class="navbar navbar-expand-lg bg-primary-subtle bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Presented by TreeHouse</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon ms-auto"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>

<div class="jumbotron text-center">

<h1 class="display-4">Front End Conf</h1>

<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p> </div>

<div class="container"> <div class="row align-items-start"> <div class="col-sm "> <h3 class="mb-4">About Full Stack Conf</h3> <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p> <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p> </div> <div class="col-sm order-lg--1">

    <h3 class="mb-4">Expert Speakers</h3>
    <img src="img/pdx.jpg" class="mb-4 img-fluid rounded">

<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p> <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p> <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p> </div> <div class="col-sm"> <h3 class="mb-4">What You'll Learn</h3> <ul> <li><strong>MongoDB</strong>: NoSQL database</li> <li><strong>Express</strong>: Framework for Node</li> <li><strong>React</strong>: JavaScript library</li> <li><strong>Node.js</strong>: JavaScript environment</li> <li><strong>ES2015</strong>: Latest version of JavaScript</li> <li><strong>Babel</strong>: JavaScript compiler</li> </ul> </div> </div>
<h1 class="display-4 text-center m-5 text-muted">Speakers</h1>

[description here]

<h1 class="display-4 text-center m-5 text-muted">Schedule</h1> [description here]

<hr> <div class="row py-4 text-muted"> <div class="col-md"> <p><strong>About Treehouse</strong></p> <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p> </div> <div class="col-md"> <p><strong>Stay up-to-date on Full Stack Conf</strong></p> <div class="input-group"> <input type="text" class="form-control" placeholder="Email"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Sign up</button> </span> </div> </div> </div> <hr>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body> </html>

In this code, "Presented by Treehouse" is pushed to the right. <a class="navbar-brand order-1" href="#">Presented by TreeHouse</a>

However, when I make the screen smaller, the "Presented by Treehouse" does not stick to its original position. I am trying to solve it but don't know how to do it, I went through a Bootstrap documentation and I am still unsure how to make it work

1 Answer

Cool Beans
Cool Beans
6,937 Points
Cool Beans
Cool Beans
6,937 Points

Unfortunately i can't upload screenshots here