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!

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

Posted by Austin Grandt
Austin Grandt
Courses Plus Student 4,811 Points

Bootstrap Nav Button Margin

I have created a site using Twitter Bootstrap and have a login and register button in the navigation. It looks fine when the nav is at the top, but when it switches to mobile version the buttons are pushed up the left side of the mobile nav.

Does anyone have any suggestions how to get about 5px of space between the left side of the nav and the buttons? I have tried a bunch of different css properties, but can't seem to get anything to work.

Thanks!

Austin Grandt
Austin Grandt
Courses Plus Student 4,811 Points 
<!-- Beginning of NAV! -->

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand img-responsive" href="#"><img style="height: 35px" src="img/exportabroadtoplogo.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="market-research-tool.html">Market Research Tool</a></li>
            <li class="divider"></li>
            <li><a href="pricing.html">Pricing</a></li>
          </ul>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    <!-- Navbar Right -->
      <ul class="nav navbar-nav navbar-right">
        <li>
            <form action="#">
                <button class="btn btn-primary btn-md navbar-btn">Login</button>
            </form>
        </li>
        <li>
             <form action="#">
                <button class="btn btn-primary btn-md navbar-btn">Register</button>
            </form>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--END OF NAV -->

4 Answers

Justin Allen
Justin Allen
4,558 Points
Justin Allen
Justin Allen
4,558 Points

add the class "mobile-margin-btn" to the buttons then add this in your css style sheet. You can convert the px to % I didn't. Hopefully this gives you the result I think you are looking for.

.mobile-margin-btn { margin-left: 12px; }

This is the one thing I'm not a fan of about bootstrap. But it's quick and gets the job done so hacks I guess are part of the game. Let me know.

Justin Allen
Justin Allen
4,558 Points
Justin Allen
Justin Allen
4,558 Points

Can you post the code and example? I think I know what you're going thru and it's a downfall of bootstrap kind of being at the mercy of there framework. My first thought is maybe put them in col-xs-6 but I would have to see it before making that official. haha

Austin Grandt
PLUS
Austin Grandt
Courses Plus Student 4,811 Points
Austin Grandt
Austin Grandt
Courses Plus Student 4,811 Points

Hi Justin,

I posted the code above. Thank you for the response!

Austin Grandt
PLUS
Austin Grandt
Courses Plus Student 4,811 Points
Austin Grandt
Austin Grandt
Courses Plus Student 4,811 Points

Thanks Justin for the Answer! I actually ended up taking your CSS and making the mobile-margin-btn class like you suggested only visible in the xs (mobile) size. Thanks for the help!