This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 1 year ago.
I was trying to make a scrollable(in X direction) flexbox container to display cards but as the number of cards increase the width of cards decrease but I want the cards to be of equal width even though it overflows the body. I tried this also Full width flex items but didn't worked please help me
boyd{
overflow:hidden}
.container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: scroll;
width: 100%;
}
.container .card {
padding: 10px;
border: 0.3px solid rgba(219, 214, 214, 0.801);
border-radius: 5px;
box-shadow: 1px 4px 8px 0px rgba(219, 214, 214, 0.801);
width: 18rem;
}
.card-head {
text-align: center;
}
.cardimg img {
width: 95%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Website</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
</div>
<div class="mainbody">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque delectus excepturi quas, placeat voluptatibus quam similique magni in dicta eligendi ratione, amet quaerat debitis quo ipsum quasi. Numquam, eos veritatis?50
</div>
</body>
</html>
Try this:
.container .card {
flex-shrink: 0;
/* ... */
}
flex-shrink docs: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 4 months ago.
I have align-items: stretch flexbox and inside this flexbox I have image and some text content.
text content is static and I need height of img to be as same as height of text content.
When I use different imgs with different aspect ratio I see different height on each img but I want the height of all images to be same.
*Please test snippet in fullscreen mode to see the problem
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title img {
object-fit: cover;
width: 150px;
height: 100%;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
if your text is going to contain the same line heights, you can use em measurements, 1em being 1 line of rem text size, if you plan on having different text contentss and line heights per span, you could also do this by having a class for each image, and then changing the height through those rather than a universal img tag, meaning you can change settings per image, rather than universally in your container.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title > img {
object-fit: cover;
width: 150px;
height: 7.25em;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
You have to give height and width to the parent of img.
I have created a snippet for this.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
width: 150px
}
.content{
width: calc(100% - 150px)
}
.title img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
I tried to display information in form of cards. Each cards is inside ordered list li. On adding more card in form of li, the content goes out of page from top. How can I set the height to adjust automatically according to the number of cards.
Html code
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi
nihil
cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus
iure
ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
</ul>
</div>
</section>
</body>
Corresponding CSS
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section{
width: 100%;
height: 100vh;
background: #323a45;
background-size: cover;
}
``
Can you please check the below code? Hope it will work for you. We have used display flex property to create cards element, it seems like you have used float element because of float it creates height alignment issue. We provide you two alignment structure so you can use any of according to your convenience.
Please refer to this link: https://jsfiddle.net/yudizsolutions/1vLqr6uo/2/
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section {
width: 100%;
height: 100vh;
/* background: #323a45;*/
background-size: cover;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
ul li {
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.events.copy ul li {
display: block;
}
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi nihil cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus iure ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
<div class="events copy">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
</section>
</body>
I want to recreate a grid as shown in the image with css grid. Each image and text below it would represent one article or blog post. I could split the css grid into 4 rows but then I would also need to split the article structure into image and text which I want to avoid. The bottom edges of the two smaller images on the bottom should be aligned with the bottom edge of the big image.
Edit: The text will always have the same amount and Image ratio (4:3) will also be the same.
HTML
<div class="grid">
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
SCSS
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 2rem;
.post {
&:first-of-type {
grid-area: span 2 / span 2;
}
}
If you want to align the edges of 2 images, you have to target them. There is a new css property called subgrid that lets you target the children of the children without breaking the children into several tags. So you can target the images in the main grid without breaking your article HTML structure.
But according to caniuse, the subgrid property is currently only supported by firefox.
Here is an example with your HTML and some CSS using subgrid. I have put a background-color on images to be able to see them without a real image.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 2rem;
}
.post {
display: grid;
grid-template-rows: subgrid;
}
.post:not(:first-of-type) {
grid-area: span 2 / span 1;
}
.post:first-of-type {
grid-area: span 4 / span 2;
}
.post:first-of-type img {
grid-area: span 3 / span 2;
}
.post img {
background-color: black;
width: 100%;
height: 100%;
}
<div class="grid">
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</div>
<div class="post">
<img src="#" alt="" />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam libero
officiis molestias eveniet odit velit? Fugiat maiores perspiciatis in,
necessitatibus beatae nobis.
</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 am trying to get this red line exactly between the columns, precisely to make it stand between Lorem ipsum's and paragraphs. The problem is that it should be one long line that goes through the page, but this one breaks because of the new row. Is there a better way to do it maybe..?
Here's the current state: http://codepen.io/anon/pen/WReerM
.content--border {
border-right: 2px solid red;
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>
The easiest way is to move content--border class to col-md-7 instead of col-md-3.
You can move the border to the left edge of col-md-7 instead.
.content--border {
border-left: 2px solid red;
}
Also can put it in a media query so it disappears on smaller screens:
#media screen and (min-width: 992px) {
.content--border {
border-left: 2px solid red;
}
}
Demo here
Move the border to the left of your other column:
.content--border {
border-left: 2px solid red;
}
see my working codepen:
http://codepen.io/egerrard/pen/pRzzRx
HTML:
<div class="container content">
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>
CSS:
.content--border {
border-left: 2px solid red;
}
You can use :before pseudo element of parent element (.container) to draw this line. This will allow to have straight line without any breaks irrespective of content length in both columns.
Note: Please see the demo in full page mode.
Necessary CSS:
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 </p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
it would be easier to make a div element and place it between them with absolute positioning, give the div a height and manipulate using its margin or the top left property and position it where you want, also encase it all in a div...