How to force dropdown boostrap buttons in a nav bar to fill the entire container width?


Tags: html,css,django,twitter-bootstrap

Problem :

I loaded css and js with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"> 
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com
/bootstrap/3.1.1/css/bootstrap.min.css">

In the body of the html I have a container which holds all parts of the page. If I use links without a dropdown the buttons auto fill the width of the container. However, once I switched to drop down buttons, the button widths do not auto size to fill the container. The code for the navbar is here:

 <div class="container">   
  <div class="masthead">
    <h3 class="text-muted"></h3>
    <nav>
      <ul class="nav nav-justified">


            <li>
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>

                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>              
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact </a></li>
              </ul>
            </div>  
            </li>
            <li>

            <div class="btn-group">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
            </li>
            <li>
            <div class="btn-group">
              <button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Home
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>  
            </li>





      </ul>
    </nav>
 </div>

The container gets closed out later on in the html. Any help on how to make the button widths autoscale to fill the width of the container would be greatly appreciated. I can obviously add white space around the button names with &nbsp until the buttons fill the width, but the amount of whitespace required will not be the same for different devices. I'm thinking a css override will do it, but I have not found one that works.



Solution :

Change the display properties of the btn-group and add width to the button.

button.btn.btn-primary.dropdown-toggle {
    width: 100%;
}
.btn-group {
    display: block;
}

Demo


    CSS Howto..

    how is Zurb's Foundation Menu button coded?

    How to overlap other elements using resizable element?

    How to get rid of column border of gridview using CSS

    How to get an App made using JavaScript to autoresize for other Apple Devices?

    How to use only CSS to round my div tag area's corners?

    How to select via regex all class notations in css file

    How does the resizing api on the App Engine Imagine API work?

    How to reuse CSS selector?

    How do I wrap a overflowed span in fixed div

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to CSS select each first div without class after div with class?

    How to align HTML horizontaly using CSS

    How to make css width work in firefox

    How to vertically align both image and text in a DIV using CSS?

    How to set font style light?

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to use resolution relative css files?

    How to organize user's shares to easily add comments to that particular post?

    How to make an external HTML file not appear in the home page?

    How to pause or delay animation using JavaScript/jquery

    In CSS/SVG, how to rotate each character of a word?

    How to simulate \hfill with HTML and CSS?

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    How to Center Text in a JavaScript Function?

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How to align div to center of verital and horizontal

    How to handle caching of GWT theme CSS files

    How do I make a (mock) bank system? [closed]