Контейнер

Сітка 

1

<div class="container-fluid">

   <div class="row">         <div class="col" style="background-color:red;">1</div>         <div class="col" style="background-color:lavender;">2</div>         <div class="col" style="background-color:red;">3</div>     </div>

</div>

2

<div class="container">

   <div class="row">         <div class="col-3" style="background-color:red;">1</div>         <div class="col-6" style="background-color:lavender;">2</div>         <div class="col-3" style="background-color:red;">3</div>     </div>

</div>

Cтрибки

• col-sm-  576px  телефон

• col-md-  768px  планшет

• col-lg-  992px  монітор

• col-xl-  1200px  великий монітор

<div class="container">

   <div class="row">

     <div class="col-sm-12 col-md-4 col-lg-3 col-xl-2" style="background-color:#DAF7A6;">1</div>

     <div class="col-sm-12 col-md-5 col-lg-6 col-xl-8" style="background-color:#1AF7A6;">2</div>

     <div class="col-sm-12 col-md-3 col-lg-3 col-xl-2" style="background-color:#DAF7A6;">3</div>

   </div>

</div>

Вирівняти

<div class="row text-center"> - текст по центру

<div class="row justify-content-center">

• •      justify-content-center - (блоки) по центру

  •      justify-content-end - вправо

    •      justify-content-around - рівномірно

    •      justify-content-between - з боків

В середину col можна вставляти інший row

Тло

<style type="text/css"> 

     body { 

          background: black !important; 

     } 

</style>

Зображення на тлі

body {

   background: url('1.jpg') no-repeat center center fixed;

   -webkit-background-size: cover;

   -moz-background-size: cover;

   background-size: cover;

   -o-background-size: cover;

}

[ Інші властивості ]