CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapresponsive-design
Bipin
Bipin

Reputation: 17

Responsive Menu in Angular Bootstrap

I am trying to create following UI in bootstrap with responsive menu, can anyone provide me guide line how I can achieve this. Both top and side menu should be responsive. Following is URL what I am trying to create.

enter image description here

Upvotes: 0

Views: 710

Answers (1)

arman1991
arman1991

Reputation: 1166

In assuming that you know the basics of web design, I will give you the short explanation how the Bootstrap works.

Bootstrap is HTML, CSS and JS framework that handles the responsiveness AUTOMATICALLY. You must only include the libraries correctly and know which Bootstrap css-classes have you too include into your HTML tags.

For example, if you want to achieve the design part for search as in your drawing, you must do something like here in Bootstrap documentation

or for navbar.

I will give you quick hint for components structure of your problem (of course, there is a lot work in css :) ):

     <!--The header-->
        <div class="col-lg-12">    
            <div class="col-lg-12">
                            <div class="col-lg-3"> <!--Logo or whatever in top left side-->
                                <div class="col-xs-6 col-md-3">
                                  <a href="#" class="thumbnail">
                                      <img src="../Content/img/chrome_logo.jpeg" />
                                  </a>
                                </div>
                            </div>
            <div class="6"></div>
                <div class="col-lg-3" style="float:right"> <!--Search input-->
                  <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>
                </div>
            </div>

            <div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
                   <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Menu1</a></li>
                        <li role="presentation"><a href="#">Menu2</a></li>
                        <li role="presentation"><a href="#">Menu3</a></li> 
                        <li role="presentation"><a href="#">Menu4</a></li>
                    </ul>
             </div>
        </div>

<div class="col-lg-12">
   <div class="col-lg-2">
    //HTML PART FOR SIDEBAR
    </div>   
    <div class="col-lg-10">
       //HTML PART FOR MAIN CONTENT
    </div>
</div>

You must wisely include exact col-lg, col-md, col-sm and col-xs classes to reach the responsiveness for each browser sizes.

One of the most important things also is to learn Boostrap grid system. This is unavoidable for components organization.

Just practice as in documentation, learn the Bootstrap css-classes and organisations carefully and after are while, you will be able to design complexer stuffs.

I hope I theoretically covered everything what you need to design with Boostrap framework.

Upvotes: 1

Related Questions