Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mark Libario
Mark Libario
9,003 Points

How do I put this navbar on the center of the page with Bootstrap?

I'm trying to center the navbar instead on the left being shown on the video. it doesnt seem to budge even if i tried to change the ul class to text-center.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav nav justify-content-center">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

    <!-- /Navbar -->

    <div class="container pt-2">
      <!-- about -->
      <div class="row">
        <div class="col-md-4 col-lg-6 push-lg-3">
         <h3 class=" mb-3 text-center">About Full Stack Conf</h3>
          <img class=" mb-1 img-fluid rounded" src="img/pdx.jpg" alt="Portland">
          <p class="text-justify text-center">The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
          <p class="text-justify text-center">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-md-4 col-lg-3 pull-lg-6">
          <h3 class=" mb-3 text-center">Expert Speakers</h3>
            <p class="text-justify text-center">Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
            <p class="text-justify text-center">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 class="text-justify text-center">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-md-4 col-lg-3">
          <h3 class=" mb-3 text-center">What You'll Learn</h3>
            <ul>
              <li><strong>MongoDB</strong>: NoSQL database</li>
              <li><strong>Angular</strong>: JavaScript framework</li>
              <li><strong>Express</strong>: Framework for Node</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> <!-- /about -->
      <!-- Speakers -->
      <h1 class="display-4 text-center my-3 text-muted text-center">Speakers</h1>
      [Speaker Bios go here]

      <!-- Schedules -->
      <h1 class="display-4 text-center my-3 text-muted text-center">Schedule</h1>
      <!-- signup form -->
<hr>
<div class="row py-4 text-muted">
  <div class="col-md-6 col-xl-5">
    <p class="text-justify text-center"><strong>About Treehouse</strong></p>
    <p class="text-justify text-center">Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
  </div>
  <div class="col-md-6 col-xl-5 offset-xl-2">
    <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><!-- /signup form -->


    </div> <!-- /container -->


    <!-- jQuery first, then bootstrap js -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

  </body>
</html>

1 Answer

Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points

Hello Mark Libario ,

Bootstrap uses Flexbox (css technique) on the navigation bar. so to center the nav bar you have to set the flexbox css property

justify-content: center;

on the

<div class="collapse navbar-collapse" id="navbarNav" style="">

if you need any additional help, please post it :)

Hope i helped a bit.