BOOTSTRAPS ATTRIUTES (PART 2)

Bootstrap (Part-3) | Buttons, Glyphicons, Tables

  1. Introduction and Installation
  2. Grid System
  3. Vertical Forms, Horizontal Forms, Inline Forms
  4. DropDowns and Responsive Tabs
  5. Progress Bar and Jumbotron
After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we’ll learn about making Buttons, the all new Glyphicons and Tables. Lets get started.
Beautiful Buttons:We can make Buttons in Bootstrap in two ways ( or more specifically, using two tags ). Firstly, with the  <a> tag and secondly by using the <button> tag.


 <a href="https://www.geeksforgeeks.org"class="btn btn-danger">
Button with'a'tag </a>
<button type="button" class="btn btn-info" >Button with 'button' tag </button>
We can have Buttons in different colours using Bootstrap. Each having a specific name like btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger and btn-link. All of them represent a specific colour of button.
We can also make buttons of different sizes ( by using btn-lg, btn-sm, btn-xs and btn-block attributes)
  • <a href=” “>Button with <a> tag </a>
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
        </div>
    <div class="container">
      <h2>Button Styles</h2>
      <button type="button" class="btn">Basic</button>
      <button type="button" class="btn btn-default">Default</button>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
    </div>
    <br>
      
    <div class="container">
      <h4>Button with <a> and  <button> tag</h4>
      <a href="https://ide.geeksforgeeks.org/tryit.php"class="btn btn-danger">
        Button with <a> tag </a>
      <button type="button" class="btn btn-success">Button with <button> tag </button>      
    </div>
      
    </body>
    </html>
    Output:
  • Gorgeous Glyphicons:
    Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation. We can use Glyphicons inside the span tag like this:
    <span class="Name of the glyphicon"> </span>
    Glyphicons can also be used within buttons like this:
    <a href="" class="btn btn-default"><span class="Name of the glyphicon"> </span> </a>
    One can see all the glyphicons available at http://getbootstrap.com/components for free. You can copy their names and paste within the quotes  class=”Paste here”. If you need more specific glyphicon you can visit http://glyphicons.com/ and buy them.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
           
        </div>
        <div class="container">
            <p>Correct<span class="glyphicon glyphicon-ok"></span></p>
            <p>Incorrect<span class="glyphicon glyphicon-remove"></span></p>
            <h4>Glyphicon with buttons</h4>
            <a href="https://www.geeksforgeeks.org"class="btn btn-primary">
                <span class="glyphicon glyphicon-backward"></span> 
            </a>
            <a href="https://www.geeksforgeeks.org"class="btn btn-danger">
                <span class="glyphicon glyphicon-pause"></span> 
            </a>
            <a href="https://www.geeksforgeeks.org"class="btn btn-success">
                <span class="glyphicon glyphicon-play"></span> 
            </a>
            <a href="https://www.geeksforgeeks.org"class="btn btn-primary">
                <span class="glyphicon glyphicon-forward"></span> 
            </a>
        </div>
        <br>
        <div class="container">
            <a href="https://www.geeksforgeeks.org"class="btn btn-primary">
            <span class="glyphicon glyphicon-thumbs-up"></span>Like Button 
        </a>
        </div>
    </body>
    </html>
    Ouput:

  • Tantalizing Tables:
    For creating tables, we need the <table> tag within which we use <tr> tag to define each row and <td>/<th> tag to represent actual data cell. In the table tag we can add different classes attributed to them which can make our table look better. Some of the table classes would be table-striped, table-bordered, table-hover, table-condensed, etc. You can find all the table classes here. The basic structure of the table is :
    <table class="table-striped">
       <tr>
          <td>First Column</td>
          <td>Second Column</td>
          <td>Third Column</td>
       </tr>
    </table>
    You can also add different colours to each row of the table using the colour in the

    <tr> tag like <tr class=”danger”> </tr>
    Similarly, you can also add colours to each cell by including the class of colours in the <td> tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
           
        </div>
        <div class="container">
            <h4>Tables using Bootstrap</h4>
            <hr><hr>
            <div class="container">
                <div class="bg bg-success">
                    <table class="table table-hover">
                       <tr class="danger">
                        <td>First Column</td>
                        <td>Second Column</td>
                        <td>Third Column</td>
                       </tr>
                       <tr class="info">
                        <td>Python</td>
                        <td>Java</td>
                        <td>Swift</td>
                       </tr>
                       <tr class="danger">
                        <td>HTML</td>
                        <td>CSS</td>
                        <td>JavaScript</td>
                       </tr>
                       <tr class="info">
                        <td>MySql</td>
                        <td>MongoDB</td>
                        <td>SQL lit</td>
                       </tr>
                    </table>
                </div>
           </div>
       </div>
    </body>
    </html>
    Output:

    • You’ll learn more of Bootstrap stuff in the next article. Keep Learning!






ootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms

  1. Introduction and Installation
  2. Grid System
  3. Buttons, Glyphicons, Tables
  4. DropDowns and Responsive Tabs
  5. Progress Bar and Jumbotron
In this article, we’ll learn creating forms. Forms are used almost in every website and they are used to collect user input.
Forms:
Bootstrap provides 3 types of form layout, namely:
  • Vertical Forms (Default)
  • Horizontal Forms
  • Inline Forms
    We’ll look into each of them separately :

  • Vertical Forms:First of all, we’ll initialize the form using <form> tag. We’ll wrap all the labels and form controls inside the tag <div class=”form-group”>. This is needed for optimum spacing between the form components.
    Now, we can design the form within these tags as per our need. We can use a label to define a label for an input element. Remember that the <for> attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. After the label tag, one can enter the <input> tag that specifies an input field where the user can enter data. The class to be used inside the input tag must be class=”form-control”. One can also use placeholder attribute which specifies a short hint that describes the expected value of an input field.

    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
        </div>
    <div class="container">
        <h4>Vertical Form</h4>
        <form action="">
            <div class="form-group">
                <label for="id1">User Name</label>
                <input class="form-control" type="text" id="id1" placeholder="Enter your User Name">
            </div>
            <div class="form-group">
                <label for="id2">Password</label>
                <input class="form-control" type="password" id="id2" placeholder="Enter your password">
            </div>
            <div class="container">
                <button type="button" class="btn btn-success">Login</button>
                <button type="button" class="btn btn-secondary">Register</button>
            </div>
        </form>
    </div>
      
    </body>
    </html>
    Output:
  • Horizontal Forms:Horizontal forms are different from Vertical forms not only in the amount of markup, but also in the presentation of the form. To make a form horizontal, add  class=”form-horizontal” in the <form> element. If you’re using the <label> element then you must use class=”control-label”. Also, remember that you can use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout.
    You can also add particular styles to the labels and input field. Add any of the classes has-warning, has-success, has-error,etc. in the <div> tag which contains class which has form-group to give it different effects when selected.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
        </div>
    <div class="container">
        <h4>Horizontal Form</h4>
        <form action="" class="form-horizontal">
            <div class="form-group has-success">
                <label class="control-label col-sm-2" for="id1">Username</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" id="id1" placeholder="Enter your User Name">
                </div>
            </div>
            <div class="form-group has-success">
                <label class="control-label col-sm-2" for="id2">Password</label>
                <div class="col-sm-6">
                    <input class="form-control" type="password" id="id2" placeholder="Enter your password">
                </div>
            </div>
            <div class="container">
                <button type="button" class="btn btn-success">Login</button>
                <button type="button" class="btn btn-secondary">Register</button>
                <lebel>
                    <input type="checkbox">Remember me
                </lebel>
            </div>
        </form>
    </div>
      
    </body>
    </html>
    Output:
  • Inline Forms:As the name suggests, in an inline form, all of the elements are inline, left-aligned, and the labels are alongside. You just need to add the class=”form-inline” in the form element.
    Using the class=”sr-only” you can hide the labels of the inline forms which might cause problems sometime.
    You can also add glyphicons inside the forms. For that you have to add class=”has-feedback” and add the span tag in which the glyphicon is present after the <input> tag. Remember adding form-control-feed as the class of the span tag.
    Example:
    filter_none edit
    play_arrow
    brightness_4
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="color:green">
         <h1>GeeksforGeeks</h1>
        </div>
    <div class="container">
        <h4>Inline Form</h4>
        <br>
      <form class="form-inline" action="/action_page.php">
        <label for="email">Username:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter Username" name="email">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
        <button type="button" class="btn btn-danger">Login</button>
        <button type="button" class="btn btn-secondary">Register</button>
      </form>
                  
          
    </div>
      
    </body>
    </html>
    Output:

    Comments

    Post a Comment