Головна‎ > ‎Bootstrap 4‎ > ‎

Контейнер 

Сітка 

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">
  <div class="col-sm-4" style="background-color:#DAF7A6;">1</div>
  <div class="col-sm-4" style="background-color:#DAF7A6;">2</div>
  <div class="col-sm-4" style="background-color:#DAF7A6;">3</div>
</div>


Планшет

<div class="row">
  <div class="col-md-4" style="background-color:#FFC300;">1</div>
  <div class="col-md-4" style="background-color:#FFC300;">2</div>
  <div class="col-md-4" style="background-color:#FFC300;">3</div>
</div>


Монітор (міні)

<div class="row">
  <div class="col-lg-4" style="background-color:#FF5733;">1</div>
  <div class="col-lg-4" style="background-color:#FF5733;">2</div>
  <div class="col-lg-4" style="background-color:#FF5733;">3</div>
</div>


Монітор

<div class="row">
  <div class="col-xl-4" style="background-color:#C70039;">1</div>
  <div class="col-xl-4" style="background-color:#C70039;">2</div>
  <div class="col-xl-4" style="background-color:#C70039;">3</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;
}




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