There is a conteiner block in it row and text in it. This text on the task should be in the middle of the block. And it should always be in the middle when the screen changes. How do i do this?

 <div class="container"> <div class="row"> <div class="col-lg-12"><h1>Привет!</h1></div> </div> </div>
  • Give a sample code, specify what version of bootstrap you have - Kjuri
  • Version bootstrap4. <div class = "container"> <div class = "row"> <div class = "col-lg-12"> <h1> Hello! </ h1> </ div> </ div> </ div> Simple code. I just want to understand how it can be done so that he would be centered on any screen - Dima Kononov

2 answers 2

Learn to use the search on the site Bootstrap . An example can be found here .

Option 1:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col"> <p class="text-center">Текст по центру</p> </div> </div> </div>

Option 2. Align and vertically (more details here ):

 .d-flex{ height: 300px; } 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col my"> <div class="d-flex justify-content-center align-items-center"> <p class="text-center">Текст по центру</p> </div> </div> </div> </div>

  • Thank!!! You saved me from torment! TA-dah . It is worth scrolling in the documentation. - Dima Kononov
  • one
    @DimaKononov If my answer helped you and solved your problem, please accept it. - doox911 8:37

Use the text-center class Documentation

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h1>Привет!</h1> </div> </div> </div>

  • no no ... misunderstood me. The text should be centered horizontally and vertically. - Dima Kononov