Bootstrap Case: Adding Button and Icon


Adding a Button

Button classes can be used in <a>, <button>, or <input> elements.

The following example puts a large and light-blue "Search" button in the Jumbotron. To achieve this effect, we will use the .btn-lg and .btn-info classes:

Example

 <div class="jumbotron">
  <h1>My first Bootstrap website!</h1>
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <a href="#" class="btn btn-info btn-lg">Search</a>
</div>

Try it Yourself »

Note Why do we put a # in the href attribute of the link?

Since we do not have any page to link it to, and we do not want to get a "404" message, we put # as the link. In real life it should of course been a real URL to the "Search" page.

Adding an Icon

Bootstrap also provides 200 glyphicons.

To display a glyphicon, simply write:

<span class="glyphicon glyphicon-print"></span>

The code line above will display a Print icon like this:

The following example adds a Search icon on the "Search" button:

Example

 <div class="jumbotron">
  <h1>My first Bootstrap website!</h1>
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <a href="#" class="btn btn-info btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search
  </a>
</div>

Try it Yourself »


Color Picker

colorpicker