Блог

У меня проблема, когда я использую загрузочный jumbotron со строкой. Я застрял в CSS и bootstrap, чтобы расположить строку по центру контейнера jumbotron, что в результате делает его отзывчивым. Я здесь, потому что я искал решение и не нашел его.

 `<div class="jumbotron jumbotron-fluid img-fluid">
        <div class="row align-center jumbo-row">
            <div class="col-12 col-md-4 align-self-center">
                <h1>BUILD UP YOUR BODY TODAY</h1>
                <h5>A truly epic gym</h5>
                <h5>OPEN 24/7</h5>
                <button type="button" class="btn btn-warning">Subscribe Now</button>
            </div>
        </div> 
  

Команда CSS:

 .jumbotron {
background-image: linear-gradient( rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)),
url("../images/photos/gym4.jpg");
color: #fff;
margin-bottom: 0;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
width: 100%;
min-height: 100vh;
background-size: cover;
background-position: center;
padding: 25px;}

.jumbotron h1 {
font-family: "Exo", font-family;
color: #ffff00;}

.jumbotron .container-fluid {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)}
  

результат кода

к счастью, я нашел ответ. Мне просто нужно было добавить контейнер-fluid под тегом jumbotron и добавить две команды начальной загрузки, такие как (выровнять элементы по центру (выравнивание по вертикали)) и (выровнять содержимое по центру (выравнивание по горизонтали)) в пределах тега row, и он автоматически выровнял столбец по центру jumbotron.

 <div class=" jumbotron jumbotron-fluid ">
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col-12 col-md-4 ">
                    <h1>BUILD UP YOUR BODY TODAY</h1>
                    <h5>A truly epic gym</h5>
                    <h5>OPEN 24/7</h5>
                    <button type="button" class="btn btn-warning">Subscribe Now</button>
                </div>
            </div>
        </div>