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

General Discussion

Terrance Corley
Terrance Corley
11,990 Points
Posted by Terrance Corley
Terrance Corley
11,990 Points

Help with bootstrap...

I'm trying to recreate a template by using a combination of Bootstrap and custom CSS. I can't seem to get my banner text to display on it's own line on lg/xl displays. This is how it should look.

Here is my repository with a link to my site. Can anyone give me a Bootstrap solution to this? Thanks!

1 Answer

Ella Ruokokoski
Ella Ruokokoski
20,881 Points
Ella Ruokokoski
Ella Ruokokoski
20,881 Points

Your text cotent div is inside the navigation which is why they are trying to align. Take the text content div outside the navigation

this is what I would do

<!--Header-->
<div class="header">
     <!-- Main Navigation -->
    <nav class="navbar transparent navbar-toggleable-md  navbar-inverse"> 
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Theory</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <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="#">Generic</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Elements</a>
            </li>
          </ul>
        </div>
       </nav><!--Navigation ends-->
  <!--TextDiv-->
   <div class=" page-header text-center mt-5 col-lg-12">


            <h1 class="display-5">Welcome to Theory</h1>
          <p>A free responsive HTML5 website template by TEMPLATED.</p>
        </div><!--TextDiv Ends-->
</div><!--Header Ends->

I added a class of transparent to the navbar and removed the bg-inverse class. I wrapped the whole thing in a div with a class header

in css I changed the styling you had for .navbar to target the .header. Also changed coulpe of other things but not too much :)

.header{
   background-image: url('../img/banner.jpg');
  background-attachment: fixed; /*for the parallax-effect*/
    background-position: center top; /*changed the background position*/
    background-repeat: no-repeat;
    background-size: cover;
  min-height: 450px; /*changed height of the header*/
  padding: 50px 150px;
}
Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Hi Ella,

Thank you for taking the time to help me! I've taken in most of your recommendations but now I've having issues with my navbar-brand in the .main-header on xs displays. I would like the navbar-brand and the burger/nav icon to justify the space between them like they do in the other screen sizes, but for some reason at the screen size of xs they seem to overlap one another. Any ideas?

Thanks again!