Bootstrap Components

Chapter 2

  1. Buttons Bootstrap provides several classes for styling buttons, including basic button styles, button sizes, and button colors. You can use these classes to quickly create buttons that match your design.

Here’s an example of how to use the basic button styles:

<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>
<button type="button" class="btn btn-link">Link</button>
  1. Forms Bootstrap provides several classes for styling forms, including form layout, form controls, and form validation styles. You can use these classes to quickly create forms that match your design.

Here’s an example of how to use the basic form layout styles:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  1. Tables Bootstrap provides several classes for styling tables, including basic table styles, table head styles, and table row styles. You can use these classes to quickly create tables that match your design.

Here’s an example of how to use the basic table styles:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>@janedoe</td>
    </tr>
    <tr>
    <td>3</td>
      <td>Bob</td>
      <td>Smith</td>
      <td>@bobsmith</td>
    </tr>
  </tbody>
</table>
  1. Images Bootstrap provides several classes for styling images, including basic image styles, rounded images, and circular images. You can use these classes to quickly create images that match your design.

Here’s an example of how to use the basic image styles:

<img src="image.jpg" alt="image" class="img-fluid">