CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbutton
user3097331
user3097331

Reputation: 129

How to code a div of buttons to be Bootstrap responsive?

I am using Bootstrap 3.0 to code my website. So I have this navigation area that is made up of 6 buttons running horizontally across the page. However, I would like to make this navigation area turn into a bar with a menu icon on the side once the user resizes the browser or is viewing the website on a smaller screen such as tablet and mobile.

How would I code this so that it will turn into navigation bar with a menu icon when viewwed on smaller devices. Should I change this area into an actual navigation bar div using "nav" and "ul" and such? And then code the "li" to look like buttons?

HTML

<div class="row" style="margin-bottom: 10px; margin-left: -37px;">
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Home</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Description</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="gallery.html">Gallery</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Location</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Availability</a></button></div>
      <div class="col-md-2"><button type="button" class="btn btn-primary"><a href="index.html">Rates</a></button></div>
  </div>

Upvotes: 0

Views: 1310

Answers (1)

sunilkjt
sunilkjt

Reputation: 1005

Just see this example code or goto http://getbootstrap.com/components/#navbar for more details
<nav role="navigation" class=" navbar navbar-default ">
<div class="navbar-header">
   <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

        </div>
 <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
<li><a class="active" href="">Home</a></li>
<li><a href="">Demo</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Plans &amp; Pricing</a></li>
</ul>
</div>

</nav>

Upvotes: 1

Related Questions