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

Development Tools

belen almonacid
belen almonacid
8,495 Points
Posted by belen almonacid
belen almonacid
8,495 Points

How can i inline the itmes in xs devices with the new version of bootstrap??

When i add the following classes, when i shrink the page for small devices, it automatically set the items in the navigation bar to block. Putting them one below the other.

    <!-- 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>
  <!-- i put the nav bar outside the container because i want it to strech thrugh all the width of the page -->
  <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary ">
   <!-- we put the class container here to align the content in the navbar with the content of the page-->
     <div class="container">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#speakers">Speakers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#schedule">Schedule</a>
        </li>
      </ul>
      <a class="navbar-brand navbar-toggler-right mr-0" href="https://teamtrehouse.com">Presented by Treehouse</a>
    </div>
  </nav>


  <body>
    <!-- container -->
    <div class="container">
    <!--  About   -->
     <div class="row">
       <div class="col-sm-4">
        <h3 class="mt-2">About Full Stack Conf</h3>
        <img src="../img/pdx.jpg" alt="Portland" class="img-fluid img-thumbnail" >
        <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-4">
        <h3 class="mt-2">Expert Speakers</h3>

        <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-4">
        <h3 class="mt-2">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-5 text-muted">Speaker</h1>
      [speaker bios here...]
      <!--  Schedule -->
     <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
      [schedule goes here...]
    <!-- signup form -->
     <hr>
     <div class="row p-y-2 text-muted">
      <div class="col-md-5">
        <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-5 col-xl-offset-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>

2 Answers

Michael Davis
PLUS
Michael Davis
Courses Plus Student 12,508 Points
Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

It's doing exactly what you're telling it to by using classes navbar-toggleable-md and navbar-toggler, it's the responsive class markup.

navbar-toggleable-md tells Bootstrap to collapse, and make toggleable, on widths of medium and smaller screen sizes, and to be toggled by the element that has the class navbar-toggler

Here is the navbar documentation to help demonstrate it further.

Hope it helps!

belen almonacid
belen almonacid
8,495 Points
belen almonacid
belen almonacid
8,495 Points

Thank you that helps!!! So if i want the navbar to be always inline how can i do it in bootstrap? In the video where they explain it they use other classes that wont work with the newer version. Im trying to make the page look the same as the prototype.

Michael Davis
Michael Davis
Courses Plus Student 12,508 Points
Michael Davis
Michael Davis
Courses Plus Student 12,508 Points

To prevent the navigation bar from collapsing, just remove the toggleable class and the toggler class, this will remove the ability for the switch.

Blake Powell
Blake Powell
4,175 Points
Blake Powell
Blake Powell
4,175 Points

not sure if you got this to work a couple of months ago, but i tried this solution tonight among many, many others involving everything from pulls to columns and none of them worked. After about 3 maybe 4 hours of searching, i happened to glance over at the documentation list and see "navs" just above 'navbar' and boy did i feel like an idiot. For anyone who happens by here, currently in boostrap 4 not only do you have to remove the toggleable class, you have to remove everything involving .navbar and replace it with .nav as well. Otherwise everything will still display in block form on xs. At least thats what it was doing to me.