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 4 Basics (Retired) Building Forms with Bootstrap Custom CSS

J Scot Angus
PLUS
J Scot Angus
Courses Plus Student 5,891 Points
Posted by J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

Can I change navbar-brand text when nav collapses without using media queries (i.e., hiding A xs-down and B sm-up)?

I want to effectively replace "Presented by Treehouse" with "Full Stack Conf" once the Navigation collapses. Can you do this without media queries by simply hiding a "Full Stack Conf" link for small screens and up ... but then also hiding "Presented by Treehouse" link for extra small screens and down?

It either appears in collapsed nav, below the nav links... or it appears to the left of hamburger menu--neither of which I expected.

Here's the relevant code snippit:

<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
   <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> &#9776;
   </button>
   <div class="container collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
      <ul class="nav navbar-nav">
         <li class="nav-item">
            <a class="nav-link" 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 pull-sm-right m-r-0 hidden-sm-up" href="http://www.teamtreehouse.com">Full Stack Conf</a>
      <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
   </div>
</nav>

Here's the full snapshot of my code: https://w.trhou.se/0ovuvtmjcu

Many thanks in advance!!

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

I'm curious, why do you want to avoid using media queries? This is something that media queries are perfect for.

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Ah, I didn't realize your question was within the context of the Bootstrap course. Bootstrap has breakpoints built in that use media queries, so yes, what you want is possible. It's still using media queries, but it's within the framework and not "custom CSS". You should read their documentation to find out the specific classnames you'll need to use, but I'm sure someone here in the forum will give you an answer. In fact, I'm sure the answer is something like what you mentioned in your reply.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

David has a good point. But not only are media queries designed for this, there is no other facility in CSS that will respond to the screen size.

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

I'm asking because I want to understand what Bootstrap is capable of without custom css. I learned how to make media queries in another lesson so know that I can do that, but this lesson is about Bootstrap 4 ... and since I know I can use classes to hide stuff for certain screen sizes, I figured it must be pretty easy to swap out content based on these screen sizes (e.g., using "hidden-sm-up" on one thing, and "hidden-xs-down" on another -- yielding one view for xs screens, and another view for everything else).

Perhaps Bootstrap can't do this without custom css, but... that's all I'm trying to figure out -- can I use the "hide" classes that way?

Thanks!