BOOTSTRAP 4 FOR BEGINNERS

 BOOTSTRAP SET UP ALERT:  Put this in the head section of HTML PAGE to use BOOTSTRAP 4





 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

BOOTSTRAP CONTAINER

<div class="container-fluid  bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div> 

BOOTSTRAP GRID

1. Responsive Column

<div class="row  bg-secondary text-white">
  <div class="col">col1</div>
  <div class="col">col2</div>
  <div class="col">col3</div>

</div> 

2. Different width column

 <div class="row text-white bg-primary">
  <div class="col-sm-8">.col4</div>
  <div class="col-sm-4">.col5</div>
</div>
   

3. Bootstrap bg color

bg-success
bg-info
bg-warning
bg-danger
bg-dark
bg-light

4. Bootstrap text color

 <p class="text-primary">BLUE text.</p>
  <p class="text-success">GREEN text indicates success.</p>
  <p class="text-info">BLUE text represents some information.</p>
  <p class="text-warning">YELLOW text represents a warning.</p>
  <p class="text-danger">RED text represents danger.</p>
  <p class="text-secondary">GREY text.</p>
  

  <p class="text-body">DARK BLACK color (often black).</p>

5. BORDERED TABLE 

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>

  </table>

6. Hover row option

<table class="table table-hover ">

7. Bootstrap Images

Responsive images

   <img src="d2.jfif"  class="img-fluid"  alt="donuts">

Centered image
<img src="d2.jfif"  class="mx-auto d-block" alt="donuts">

Float left and float right images
    <img src="d2.jfif"  class="float-right" alt="donuts">
    <img src="d2.jfif"  class="float-left" alt="donuts">

Rounded Corner image 
<img src="d2.jfif"  class="rounded " alt="donuts">


Circular Image
<img src="d2.jfif"  class="rounded-circle " alt="donuts">


Thumbnail image
<img src="d2.jfif"  class="img-thumbnail " alt="donuts">

8. Bootstrap Jumbotron

 ALERT: A jumbotron indicates a big grey box for calling extra attention to some special content or information.


   <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular frontend framework</p>
  </div>
</div>

9. Bootstrap Alert

<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong>
  </div>

10. Bootstrap button

LINK BUTTON
  <a href="#" class="btn btn-info" role="button">Link Button</a>



BORDER BUTTON
 <a href="#" class="btn btn-outline-primary" role="button">Link Button</a> 

SPINNER BUTTON - LOADING BUTTON
 <button class="btn btn-danger">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>

DROPDOWN BUTTON-
<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>