Sticky header using Bootstrap Affix

https://www.w3schools.com/bootstrap/bootstrap_affix.asp

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

Add data-spy="affix" to the element you want affixed.

Optionally, add the data-offset-top|bottom attribute to calculate the position of the scroll.

 

Bootstrap classname used in react

 <div className="container-fluid mt-1 mb-3">

</div>

The bootstrap container-fluid is used for the full-width container of the display screen. This responsive container-fluid can modify as per display screen size.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

.mt-1 {
  margin-top: ($spacer * .25) !important;
}

.mb-3 {
  margin-bottomn: $spacer  !important;
}

<div className="col-lg-12"> 

</div>

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

 Extra small devices Phones (<768px) .col-xs-

Small devices Tablets (≥768px) .col-sm-

Medium devices Desktops (≥992px)  .col-md-

Large devices Desktops (≥1200px) .col-lg-  

  <div className="card">

</div>

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Example:

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) 

for controlling the space  between them.  

Textual form controls—like <input>s, <select>s, and  

<textarea>s—are styled with the .form-control class under .form-group. Included are styles for 

general appearance, focus state, sizing, and more. 

          <div className="row">
                                    <div className="col-2 text-left form-group">

                                     <label for="exampleFormControlInput1">Email address</label>
                                     <input type="email" class="form-control" id="exampleFormControlInput1" placeholder=                                    </div>

   <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>

    </select>
  </div>

          </div> 

Example of col-6:

   <div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>

</div>

Total 12 column width, col-6 takes 6 column width,  

the rest two takes 3 column width 

 

Bootstrap basic tutorial

Bootstrap (can be downloaded from https://getbootstrap.com/)

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS

A) Container 
  <div class="container"></div>
 or
 <div class="container-fluid"></div>
    The .container class: responsive fixed width container
    The .container-fluid class: full width container over entire width of the viewport. This should be used for the application mainly for desktop.

B) Bootstrap Grid System
The # sign below is the place-holder for the number of columns.
Bootstrap's grid system allows up to 12 columns across the page.
.col-sm-12 for full screen width while .col-sm-6 for half screen width
column class: .col-xs-#  (Extra small, for phone screen less than 768px)   
column class: .col-sm-#  (small, for  tablets  screen  >= 768  px)
column class: .col-md-#  (Medium, for  small laptops  screen  >= 991 px)   
column class: .col-lg-#  (Large, for  laptop screen  >=1200 px)
Example
 <div class="row">
  <div class="col-sm-4">4 column width for not small device</div>
  <div class="col-sm-8">8 column width for not small device</div>
</div> 
For small device such as phone and tablet for above example, the columns will automatically stack.

C) Table
1) .table-striped   adds zebra-stripes to each row in a table, Example of table in Bootstrap
<div class="container-fluid">
  <h2>Striped Rows</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>header column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>body column</td>
      </tr>
    </tbody>
  </table>
</div>
2)  .table-bordered:  adds borders on all sides of the table and cells:
3) .table-hover class adds a grey background hover effect
4)  .table-condensed makes a table more compact
5) .table-responsive  creates a responsive table.
6)  contextual classes: 
.active     .success     .info  .warning  .danger    

D) Alert
Example
<div class="alert alert-success"> </div>
<div class="alert alert-info"></div>
<div class="alert alert-warning"></div>
<div class="alert alert-danger"></div>    

More about Bootstrap tutorial
https://www.w3schools.com/bootstrap/