Bootstrap grid

Bootstrap screen sizes

The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

.col-12 bootstrap

.col-12{
	flex: 0 0 100%;
	max-width: 100%;
}

.row bootstrap

.row{
    display: flex;
    flex-wrap: wrap;
	margin-right: -15px;
    margin-left: -15px;
}

Bootstrap grid system

<!-- Boostrap Reference -->
https://getbootstrap.com/docs/4.0/layout/grid/

<!-- W3Schools Reference -->
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp#:~:text=The%20Bootstrap%20grid%20system%20has,or%20greater%20than%201200px%20wide)

How will it look when there is a container inside a a row bootstrap

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Source: getbootstrap.com

Bootstrap grid

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Source: getbootstrap.com

Similar codes

0 vote257 views1 answer
Get type of variable in c++
C++
1 vote258 views4 answers
C++ for loop syntax
C++
1 vote237 views1 answer
C++ remove text file
C++
0 vote253 views1 answer
Character convert c++
C++
10 votes228 views3 answers
Namespaces in c++
C++
0 vote314 views1 answer
Esp8266 wifi.localip() to string
C++
6 votes286 views3 answers
Print float up to 3 decimal places in c++
C++
0 vote292 views1 answer
Detect end of user input cpp
C++
1 vote248 views1 answer
Hello world programming
C++
0 vote299 views1 answer
C++ chrono get milliseconds
C++