View os Menu Buttons in Bootstrap Theme RollerNow that you have Bootstrap set up on your Responsive Template, you can use the code provided by Bootstrap to style your site. Bootstrap has a premade set of buttons and menus that you can use in your site. You can see what the look like in the snapshot to the right.In this tutorial, we will add all the buttons to the header of your site. Below are examples of the button function with the InMotion hosting Bootstrap styles.



Steps to add a Bootstrap Button menu

Below is the code for each button type. When stringing multiple buttons together you will need to use the toolbar code below.

<div class="btn-toolbar">
     --- Button code goes here inbetween the toolbar divs. ---
</div>

Now you can use the following buttons on your site.

  1. Copy the code Bootstrap Theme RollerOpen up the ThemeRoller.htm page and find the button code between lines 6058 to 6129. The Line numbers may vary.

    Copy the code.

    The code is broken down below.

    The Default ButtonThe Default Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Primary ButtonThe Primary Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Danger ButtonThe Danger Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Warning ButtonThe Warning Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Success ButtonThe Success Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Info ButtonThe Info Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

     

    The Inverse ButtonThe Inverse Button

    <div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" onClick="return false;">Action</a></li>
    <li><a href="#" onClick="return false;">Another action</a></li>
    <li><a href="#" onClick="return false;">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#" onClick="return false;">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->

  2. Paste the code in the header Bootstrap Theme RollerPaste the code into the head section after the header-content H2 tag. It should look like the snapshot to the right.

    The buttons are different colors If you want a button to use a specific color you can change the buttons class. below are the different button classes for the button menus in Bootstrap.

    Class name Description
    btn-inverse Default colors #555 and #222
    btn-info Default colors #5bc0de and #2f96b4
    btn-success Default colors ##62c462 and #51a351
    btn-warning Default colors #fcb44d and #f89406
    btn-primary Default colors #c3b100 and #b5cc00
    btn-danger Default colors #ee5f5b and #bd362f

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201005

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!