Blog

1. Bootstrap Images

• Responsive Images
  • Use the .img-fluid class to make images responsive and scale with the parent element.

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

Image Thumbnails

• Use the .img-thumbnail class to give an image a rounded 1px border.

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

Aligning Images

• Use alignment classes like .float-left, .float-right, and .mx-auto for centering.

<img src="image.jpg" class="float-left" alt="Left aligned image">
<img src="image.jpg" class="float-right" alt="Right aligned image">
<img src="image.jpg" class="mx-auto d-block" alt="Centered image">

2. Bootstrap Tables

• Basic Table
  • Use the .table class to create a basic table.

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Striped Rows

• Add the .table-striped class for zebra-striping.

<table class="table table-striped">
  ...
</table>

Bordered Table

• Add the .table-bordered class for borders on all sides of the table and cells.

<table class="table table-bordered">
  ...
</table>

Hover Rows

• Add the .table-hover class to enable a hover state on table rows.

<table class="table table-hover">
  ...
</table>

3. Bootstrap Alerts

• Basic Alerts
  • Use the .alert class along with contextual classes for different alert types.

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Dismissible Alerts

• Add the .alert-dismissible class and a close button.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

4. Bootstrap Buttons

• Basic Buttons
  • Use the .btn class along with contextual classes for different button styles.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Sizes

• Use the .btn-lg or .btn-sm classes to adjust the size.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Block-Level Buttons

• Use the .btn-block class to create block-level buttons.

<button type="button" class="btn btn-primary btn-block">Block level button</button>

5. Bootstrap Badges

• Basic Badges
  • Use the .badge class along with contextual classes.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Badge Links

• Use the .badge class within anchor tags for clickable badges.

<a href="#" class="badge badge-primary">Primary</a>

Badge Pills

• Use the .badge-pill class to make badges more rounded.

<span class="badge badge-pill badge-primary">Primary</span>

Practice Exercise

• Bootstrap Components:
  • Create a web page that includes a responsive image, a table with striped rows, a dismissible alert, various styled buttons, and badges.
  • Use different Bootstrap classes to apply the styles and functionalities covered in this session.

---

Summary

• Bootstrap provides a wide range of pre-styled components to enhance the design and functionality of web pages.
• Understanding and utilizing Bootstrap’s classes for images, tables, alerts, buttons, and badges can significantly speed up the development process.
• Practice using these components to create visually appealing and responsive web pages.