Мой текст не вписывается в весь div, и ссылка помещается справа, а не посередине внизу, как в предыдущем примере. Как это исправить?
Раздел, который не работает:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Tables, buttons and forms in Bootstrap-->Tables, buttons and forms in Bootstrap</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Tables-->Tables</h4>
<p><!--Tables look neat and are stylised by many bootstrap classes, learn more how to make them.-->Tables look neat and are stylised by many bootstrap classes, learn more how to make them.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Buttons-->Buttons</h4>
<p><!--Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.-->Bootstrap makes creating buttons way more easier than you might have thought of. Just see how to create one.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
<h4 class="alert-heading"><!--Forms-->Forms</h4>
<p><!--Forms have its own structure apart from only classes which helps in making them responsive throughout the website.-->Forms have its own structure apart from only classes which helps in making them responsive throughout the website.asdasdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Wanna try it!-->Wanna try it!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section>
Раздел, который работает:
<section class="row">
<header class="col-12">
<hr class="privacy-hr">
<h1><!--Typography-->Typography</h1>
<hr class="privacy-hr">
</header>
<article class="col-12 col-lg-6 col-xl-7 d-flex">
<div class="alert alert-light d-flex flex-wrap" role="alert">
<div class="flex-grow-1 align-self-start">
<h4 class="alert-heading"><!--Text-->Text</h4>
<p><!--Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.-->Don't bother stylising text to make it look more clear and catchy. Just use some classes to make any changes that has been introduced in Bootstrap for years including muting text, changing it's color, making it bigger, smaller, underlined etc.</p>
<hr>
<h4><!--Headings-->Headings</h4>
<p><!--Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.-->Bootstrap lets your h1-h5 tags style individually from display-4 to display-1 to increase sizes via rems, making it responsive and also using this class is making headings look more interesting and innovative ny changing its font and style that the text is written.</p>
<hr>
</div>
<div class="flex-grow-1 align-self-end">
<h4><a class="badge badge-secondary text-white text-wrap" style="width: 42%; padding: 2.5%; overflow-wrap: break-word;" href="https://www.000webhost.com/privacy" target="_blank"><!--Show me examples!-->Show me examples!</a></h4>
</div>
</div>
</article>
<article class="col-12 col-lg-6 col-xl-5 d-flex mb-3">
<img alt="grid" src="img/headings.webp" width="100%" height="100%">
</article>
</section> <!-- DONE 2 -->
Весь код:
Css включены в html код, приведенный выше.
Изображения, представляющие то, что я хотел иметь:
Что у меня есть:
Как это выглядит при сжатии:
Что я хотел бы иметь (буквально раздел выше):
Сайт: https://reportsquestionsznaczki65.000webhostapp.com/technologie-bootstrap/?lang=en