Hello. I need to put a paragraph at the header level, but for some reason col-md-1-12 takes up a whole line, how can I implement this?

enter image description here

Required result:

enter image description here

<div class="col-2"> <h2>1</h2> </div> <div class="col-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> <div class="col-md-2"> <h2>2</h2> </div> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p>
  • Shl, col-md-1-12 also does not work, the inspector says: imgur.com/a/laDwY - user234223
  • And what is that layout is not semantic? If you revise the approach in the layout, then there will be no problem at all. And you will not need to write the headers to specify the item. And, accordingly, easily embed microdata later. - Andrew ProjectSoft

3 answers 3

Option 1, namely, with columns:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" > <div class="container"> <div class="row"> <div class="col-md-6"> <h2 class="text-uppercase font-weight-bold mb-4">Контакты:</h2> <div class="row"> <div class="col-1"> <h3>1</h3> </div> <div class="col-10"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> <div class="row"> <div class="col-1"> <h3>10</h3> </div> <div class="col-10"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> </div> <div class="col-md-6"> <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid"> </div> </div> </div> = "" class = "img- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" > <div class="container"> <div class="row"> <div class="col-md-6"> <h2 class="text-uppercase font-weight-bold mb-4">Контакты:</h2> <div class="row"> <div class="col-1"> <h3>1</h3> </div> <div class="col-10"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> <div class="row"> <div class="col-1"> <h3>10</h3> </div> <div class="col-10"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> </div> <div class="col-md-6"> <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid"> </div> </div> </div>

Option 2 with d-flex . The difference is visible if there are 10 or more contacts:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" > <div class="container"> <div class="row"> <div class="col-md-6"> <h2 class="text-uppercase font-weight-bold">Контакты:</h2> <div class="d-flex"> <h3 class="mr-4">1</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> <div class="d-flex"> <h3 class="mr-4">2</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> <div class="d-flex"> <h3 class="mr-4">10</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> </div> <div class="col-md-6"> <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid"> </div> </div> </div> = "" class = "img- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" > <div class="container"> <div class="row"> <div class="col-md-6"> <h2 class="text-uppercase font-weight-bold">Контакты:</h2> <div class="d-flex"> <h3 class="mr-4">1</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> <div class="d-flex"> <h3 class="mr-4">2</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> <div class="d-flex"> <h3 class="mr-4">10</h3> <p> Досуговый центр "Вертикальный взлет" <br> ул. Твардовского, 8, к. 1, Москва, 123458 </p> </div> </div> <div class="col-md-6"> <img src="https://images.unsplash.com/photo-1466096115517-bceecbfb6fde?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=427bcc1d8e2505d31a239d0de6b13f75&auto=format&fit=crop&w=1050&q=80" alt="" class="img-fluid"> </div> </div> </div>

    Something like this. View full page.

     .btn-circle { background-color: blue; height: 50px; width: 50px; border-radius: 50% !important; } .btn-circle a { display: block; width: 10px; height: 20px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .btn-circle img { width: 100%; height: 100%; } .btn-lg.round { border-radius: 24px; } 
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="container"> <!-- Content here --> <div class="row"> <div class="col-2"> <h2>1</h2> </div> <div class="col-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> <div class="col-4"> <img src="http://via.placeholder.com/350x150g" class="float-left"> </div> </div> <div class="row"> <div class="col-md-2"> <h2>2</h2> </div> <div class="col-md-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> <div class="row"> <div class="col-md-4"> <button type="button" class="btn btn-primary btn-lg round">Primary course online</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary btn-circle"><i class="fas fa-phone"></i></button> </div> </div> = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin = "anonymous"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="container"> <!-- Content here --> <div class="row"> <div class="col-2"> <h2>1</h2> </div> <div class="col-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> <div class="col-4"> <img src="http://via.placeholder.com/350x150g" class="float-left"> </div> </div> <div class="row"> <div class="col-md-2"> <h2>2</h2> </div> <div class="col-md-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> <div class="row"> <div class="col-md-4"> <button type="button" class="btn btn-primary btn-lg round">Primary course online</button> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary btn-circle"><i class="fas fa-phone"></i></button> </div> </div>

      If I understand you correctly, then like this:

       <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" /> <div class="row "> <div class="col-md-1"> <h2>1</h2> </div> <div class="col-md-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div> <div class="row "> <div class="col-md-1"> <h2>2</h2> </div> <div class="col-md-4"> <p>Досуговый центр "Вертикальный взлет" ул. Твардовского, 8, к. 1, Москва, 123458</p> </div> </div>