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