Bootstrap Glyphicons And Wells

Glyphicons are simple black icons that enhance visual meaning of an element. For instance, if you have a search bar on your webpage, you can add a search icon within the search bar. Similarly, you can add an envelop icon if you have a message management system on your webpage. Opportunities are virtually limitless. You can add bootstrap glyphicons to your webpage using two classes: “glyphicon glyphicon-name”. Here “name” in the second class is basically the name of the icon you want to use. Bootstrap glyphicons are frequently used in buttons, texts, forms, toolbars, navigation etc. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
      
       <p><span class="glyphicon glyphicon-search"></span> Search</p>
        <p>Search Button:
          <button type="button" class="btn btn-primary">
             Search <span class="glyphicon glyphicon-search"></span>
          </button>
        </p>
        
    </body>

</html>

Download the code Try the code

If you open the above page in browser, you should see a simple text with a search glyphicon and a button with glyphicon. Notice that with text, the color of the glyphicon in plain text is black whereas inside button it is white. This shows that the glyphicon changes its style depending upon the element in which it is being used.

Bootstrap Wells

Well simply adds a grey rounded background around an element. It also adds some default padding around the element. To use well in your applications, simply add “well” class to the opening tag of the div. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
      <div class="well">A simple Well</div> 
    </body>

</html>

Download the code Try the code

Open the above page in the browser. You should see a rounded box with grey background which spans across the whole width of the screen. This basically is a well. You can also change the size of the well using “well-sm” and “well-lg” classes where the former creates a small well while the latter creates a large well. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
      <div class="well">A simple Well</div> 
      <div class="well well-sm">A small sized Well</div> 
      <div class="well well-lg">A large sized Well</div> 
    </body>

</html>

Download the code Try the code

The above page contains three wells. The first one is the normal well, the second one is the small well while the third one is the large well. You can see the variation in the sizes of these well. This is because they are styled via different well classes.

<<< Bootstrap Button GroupsBootstrap Badges And Labels >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .