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.

General Discussion

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

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

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!