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>
screenshot of current result
Related
I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using class="container". Any tips? Code below. I also added an image of how it looks when I inspect.
<h1> (SPH) </h1>
<div class="row">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
As mentioned in the comments.
You can use a class at the top of your page like : container.
Example:
<div class= container justify-content-center> /your code here/ </div>
The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center"> (SPH) </h1>
<div class="row justify-content-center">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
</div>
Ive been struggling for the past day on this issue, if someone can help me I would be thankful !
I am trying to do something like this with bootstrap 5.
goal I am trying to achieve
I know how to do the form, centre the logo and all, but I'm not able to split the page into two vertical section, I want to use bg-dark on the left and bg-secondary on the right.
Here's what I have for now:
<div class="container">
<div class="row">
<div class="col-4 bg-dark p-0">
<img src="/img/FOODIGO.svg" alt="">
</div>
<div class="col-8 bg-secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
</div>
</div>
thank you for your help !
this should do the trick.
for more info you can read up here: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" style="height:100vh;">
<div class="col-sm-4 bg-dark p-0">
<img src="/img/FOODIGO.svg" alt="">
</div>
<div class="col-sm-8 bg-secondary" style="height:100vh;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
</div>
</div>
I have updated the answer to include your initial code. this will allow your section to also be responsive as well.
Basically by adding -fluid to your container we stretch the container 100% the width of the parent container.
Hope this helps.
I have a problem with aligning all the containers in the given example. I would like them to adapt to the height of the largest container.
I have already tried several dozen ways and nothing h-100 helps, unfortunately.
I am giving you a link to the example as it is supposed to look like and it looks like a design designed by a graphic designer - https://prnt.sc/vnwn38
.comment__container{
background-color: #eee;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="comment__header text-center">
<h2>Komu pomogłam</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Joanna</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,Autem corporis, Autem corporis, Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Martyna</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- Aleksandra</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Bardzo miły i profesjonalny kontakt. Dziękuję bardzo Pani Ewo za pomoc! Polecam! </p>
</div>
<div class="comment__container-author text-right">
<p>- Monika</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- tata Łukasz</p>
</div>
</div>
</div>
</div>
</div>
I am trying to layout a grid in bootstrap that consists on the desktop of a full 12 column layout, inside that, there is a 8 column grid and a 4 column grid. the 8 column grid is filled with an image/text, the 4 column grid consists in its own of 2 elements below each other containting image/text.
on smaller breakpoint the layout should simply show 3 elements in same size below each other.
I fiddled around but I do not get it to work. Below you also find next to the html a sketch from what I am trying to achieve. Any hints? I do not feel this is possible out of the box with bootstrap 4.
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</section>
As a sketch it looks like this:
You need to specify the smaller col width. You also had an extra unnecessary row and col wrapping it. Below is a working example of what you are looking for. col-12 class was added for any screen smaller than md
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
Please try this snippet.
.row {
margin: 20px 0;
}
.col .card {
height: calc(100% - 10px);
}
.card{
margin-bottom: 10px;
}
.card img {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-sm">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
I want two pictures to be one size - bootstrap col-6's size, when original images have different dimensions.
I tried this code:
<div class="container">
<div class="row">
<div class="col-6">
<img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="img-fluid" alt="Responsive image">
<h3>project name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img-fluid" alt="Responsive image">
<h3>project name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
</div>
</div>
</div>
But it did not work. What should i do?
Have you tried adding width=100% to the img tag?
Another option would be adding a tag definition to col-6 class in your css file:
img.col-6{width:100%;}
you can readjust the image size by a simply adding style="width:400px;height:300px;" at the end of the image tag , you can change the pixels to your preferred size for each image.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6"> <img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="img-fluid" alt="Responsive image" style="width:400px;height:300px;"></div>
<div class="col-6"> <img src="https://images.unsplash.com/photo-1536431311719-398b6704d4cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=40" class="img-fluid" alt="Responsive image" style="width:400px;height:300px;"> </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<h3>project name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
</div>
<div class="col-6">
<h3>project name</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aperiam esse sint quisquam. Obcaecati mollitia hic cum dolorum delectus vel laborum corrupti dolore possimus! Facere voluptatum aperiam maxime odit aut!</p>
</div>
</div>
</div>
</body>
</html>