2 years ago
#75094
Eriko
Bootstrap: space around
I started with bootstrap and try to create a row with 2 columns. The column right is split up into 2 rows. I try to use "space-around" to get a nicer layout for the column right (vertically), however, it does not work. The two rows are centered instead. Anyone knows why not? btw: the image itself is larger than the 2 rows in the right column.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid px-0">
<div class="row">
<div class=" col-6">
<img class="img-fluid" src="pictures/Eriko.jpg" alt="">
</div>
<div class="col-6 bg-info">
<div class="row h-100 align-content-around">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-8 text-center bg-danger">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
<div class="row justify-content-center">
<div class="col-8 text-center bg-primary">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
</div>
</div>
</div>
</div>
</section>
html
bootstrap-4
0 Answers
Your Answer