When layout layout faced with such a problem, when you add a picture, there is a huge indentation between the paragraph and the headings. How can this be fixed?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <section class="mobile"> <div class="mobile-container"> <div class="container"> <div class="row"> <div class="col-md-5"> <h1>akita uni dog</h1> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> <div class="col-md-3 offset-md-2"> <img src="https://cdn1.savepice.ru/uploads/2018/8/24/a15cc09ebad58f0a8417f40f311a9509-full.png" alt=""> </div> </div> <div class="row"> <div class="col-md-5"> <div class="rows"> <div> <h3>Fully Responsive Design</h3> </div> <div> <h3>High Quality Code</h3> </div> <div> <h3>Different Headers & Layout</h3> </div> </div> </div> </div> </div> </div> </section>

enter image description here

  • one
    Hello. That's right, the h3 headers go to the next row, hence they appear below. Alternatively: reduce the height of the content in the first row , for example, reduce the height of the image. You can transfer h3 headers to the first row, as aleksandr_hramcov answered here. I recommend reading about the bootstrap net, how it works at all, since this is the problem here. - Alexander Kazakov

1 answer 1

You can like this:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <section class="mobile"> <div class="mobile-container"> <div class="container"> <div class="row"> <div class="col-md-5"> <h1>akita uni dog</h1> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <div> <h3>Fully Responsive Design</h3> </div> <div> <h3>High Quality Code</h3> </div> <div> <h3>Different Headers & Layout</h3> </div> </div> <div class="col-md-3 offset-md-2"> <img src="https://cdn1.savepice.ru/uploads/2018/8/24/a15cc09ebad58f0a8417f40f311a9509-full.png" alt=""> </div> </div> </div> </div> </section>

  • Thanks for the help, I made a rather stupid mistake. - BraFik