Bootstrap werkt met kolommen en bestaat uit 12 kolommen. In het over mij gedeelte zijn de classen col-md-5 en col-md-7 toegepast. Meer informatie over hoe kolommen werken is te vinden op
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
Voeg de onderstaande code toe onder het slider gedeelte in het index.html bestand.
<div id="about" class="section">
<div class="container">
<div class="row">
<div class="col-md-5">
<img class="aboutImage" src="img/about.jpeg">
</div>
<div class="col-md-7">
<h4>Over mij</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis erat tempor eros accumsan, ut ornare orci commodo. Phasellus gravida tincidunt elit, non maximus magna mollis id. Nam bibendum ligula nec rutrum accumsan. Quisque fringilla, dolor a commodo porta, mi nibh ullamcorper ante, et sodales massa dolor commodo nisl. Nunc vitae nisl et lorem placerat lobortis et at massa. Cras dignissim hendrerit diam at pulvinar. Vivamus luctus sodales ex, in fermentum turpis volutpat nec. In fringilla condimentum dolor quis molestie. Vivamus fermentum ultricies lorem et porttitor. Fusce scelerisque sapien bibendum, volutpat neque nec, fermentum nisl. </p>
<p>Mauris turpis lacus, sodales in dictum quis, luctus quis eros. Duis sagittis arcu orci, sit amet imperdiet nulla sagittis ut. Maecenas gravida diam ac enim viverra, a volutpat quam congue. Sed ultrices nibh lectus, quis dapibus tortor pharetra vitae. Integer eleifend ultricies tincidunt. In auctor odio non nulla ultrices, id euismod nunc feugiat. Suspendisse dictum nulla porttitor tortor bibendum aliquet. Duis feugiat orci sit amet ultricies ultrices. Nunc eget risus urna. Maecenas non pharetra dui. Nunc consequat porttitor risus, ut placerat elit mattis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec elementum diam. Sed ut leo id libero condimentum mollis sed at nisl. Pellentesque hendrerit lorem vitae tortor blandit lobortis. </p>
</div>
</div>
</div>
</div>
In de bovenstaande code is lorem ipsum gebruikt als voorbeeld. Hier kan een tekst over jezelf geplaatst worden.
Als alles goed is gegaan dan ziet het index.html bestand er als volgt uit.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>"></script>
</head>
<body>
<div id="slides">
<div class="overlay"></div>
<div class="slides-container">
<img src="img/slide1.jpg" alt="">
<img src="img/slide2.jpeg" alt="">
<img src="img/slide3.jpeg" alt="">
</div>
<div class="titleMessage">
<div class="heading">
<p class="main">Laurens post</p>
<p class="sub typed"></p>
</div>
</div>
<nav class="slides-navigation">
<a href="#" class="next"></a>
<a href="#" class="prev"></a>
</nav>
</div>
<div id="about" class="section">
<div class="container">
<div class="row">
<div class="col-md-5">
<img class="aboutImage" src="img/about.jpeg">
</div>
<div class="col-md-7">
<h4>Over mij</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis erat tempor eros accumsan, ut ornare orci commodo. Phasellus gravida tincidunt elit, non maximus magna mollis id. Nam bibendum ligula nec rutrum accumsan. Quisque fringilla, dolor a commodo porta, mi nibh ullamcorper ante, et sodales massa dolor commodo nisl. Nunc vitae nisl et lorem placerat lobortis et at massa. Cras dignissim hendrerit diam at pulvinar. Vivamus luctus sodales ex, in fermentum turpis volutpat nec. In fringilla condimentum dolor quis molestie. Vivamus fermentum ultricies lorem et porttitor. Fusce scelerisque sapien bibendum, volutpat neque nec, fermentum nisl. </p>
<p>Mauris turpis lacus, sodales in dictum quis, luctus quis eros. Duis sagittis arcu orci, sit amet imperdiet nulla sagittis ut. Maecenas gravida diam ac enim viverra, a volutpat quam congue. Sed ultrices nibh lectus, quis dapibus tortor pharetra vitae. Integer eleifend ultricies tincidunt. In auctor odio non nulla ultrices, id euismod nunc feugiat. Suspendisse dictum nulla porttitor tortor bibendum aliquet. Duis feugiat orci sit amet ultricies ultrices. Nunc eget risus urna. Maecenas non pharetra dui. Nunc consequat porttitor risus, ut placerat elit mattis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec elementum diam. Sed ut leo id libero condimentum mollis sed at nisl. Pellentesque hendrerit lorem vitae tortor blandit lobortis. </p>
</div>
</div>
</div>
</div>
<script src="js/jquery.superslides.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
Voeg de onderstaande CSS styling toe aan het style.css bestand.
css/style.css
.section {
padding: 100px 0;
}
.aboutImage {
max-width: 100%;
}
max-width: 100%; betekent hier dat afbeelding maximaal 100% de wijdheid van de kolom kan hebben.