I've this example code:
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">text article</div>
</div>
</div>
the left-block class have a background-color, but the background stop by height menu, but i like backgroud continued and stop end page, but example if insert in left-block padding-bottom=100% tha height left-block increase height by class="row" and class text-various, I like the padding stop height row or height text-various
help me please
As I understand you need something like this:
.row {
display: flex;
}
.left-block {
color: #fff;
padding: 8px;
}
.text {
padding-left: 8px;
}
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore.
</div>
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to vertically content within a div with flexbox, so that it always remains centered.
However it is not working as expected. Interested to see where I'm going wrong.
Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.
section {
display:flex;
}
div {
padding:12px;
width:400px;
height:300px;
display:flex;
align-items:center;
}
.left {background:#bada55}
.right {background:red}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
Link to codepen
You can use flex-direction on .left to make it center vertically:
section {
display: flex;
}
div {
padding: 12px;
width: 400px;
height: 300px;
display: flex;
}
.left {
background: #bada55;
flex-direction: column;
justify-content: center;
}
.right {
background: red;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
EDIT based on your comment, I believe this works:
section {
display: flex;
align-items: center;
height: 300px;
}
div {
width: 400px;
padding: 12px;
}
div.right {
display: flex;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
this is the default structure of two side by side divisions,
I want to keep the read more button at the bottom of the screen even the content is less.
<div class="row">
<div class="col-12"> Image </div>
<div class="col-12">
<h1>Lorem ipsum</h1>
<p>all the content which will be strecth to full height</p>
<a>Read more</a>
</div>
</div>
Also when i make row 100% heigth and align item : strecth, I am getting space between two columns.
As pointed by IvanS95, you can use Card Deck component of Bootstrap. If you really want to use the flexbox on your own probably below solution can be helpful.
The below solution uses Bootstrap 4.4.1
You can view the working code pen solution here
.image-style {
max-width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-4">
<div class="row">
<div class="col-6 p-2 d-flex flex-column justify-content-start">
<img src="https://picsum.photos/500/250" class="image-style" />
<h4 class="px-2 mt-2">Lorem ipsum title</h4>
<p class="px-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
<p class="px-2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
</p>
<p class="px-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas architecto odit repudiandae libero ex, neque modi explicabo quia delectus qui natus officiis nihil autem sit alias ab odio quisquam. Perferendis?
</p>
Read more
</div>
<div class="col-6 p-2 d-flex flex-column justify-content-start">
<img src="https://picsum.photos/500/250" class="image-style" />
<h4 class="px-2 mt-2">Lorem ipsum title</h4>
<p class="px-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
<p class="px-2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
</p>
Read more
</div>
</div>
</div>
In above html inside row there are two 6 unit wide columns that can sit side by side. Each column is converted to flex box using d-flex class, flex direction is set to column using flex-column class and using set the justify-content using justify-content-start class. Now, if I set margin-top to auto on read more button it will always stick to bottom.
To make sure the image width does not create problems I have set the image-style class on the image element which is defined as follows,
CSS
image-style {
max-width: 100%;
}
You can go with code that #Hiren suggested but you also don't need to use a flexbox if you don't want to. Here is an example of how you can achieve the wanted layout:
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<img src="https://picsum.photos/500/250" class="image-style" />
<h4>Lorem ipsum title</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
Read more
</div>
</div>
<div class="col-6">
<div class="card">
<img src="https://picsum.photos/500/250" class="image-style" />
<h4>Lorem ipsum title</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
</p>
Read more
</div>
</div>
</div>
</div>
CSS:
.card {
position: relative;
height: 100%;
padding: 10px;
padding-bottom: 30px;
}
.read-more-button {
position: absolute;
left: 10px;
bottom: 15px;
}
As you can see, I added padding to the parent element (card) and an absolute position to the 'read more' button. This is how we did it when there was no flexbox.
Note that I still use the Bootstrap (which is flexbox).
Basically, we must have this layout where in an image must spill out of the container and the text fills in the space created by the image (that is offset to the left).
We currently have this structure:
<div class="container">
<div class="row">
<div class="col">
Some paragraph
</div>
<div class="row">
<div class="col-5 body-img-col">
<div class="body-img-wrap">
<img src="images/some-image.jpg" alt="" />
</div>
</div>
<div class="col-7">
Some paragraph
</div>
</div>
<div class="col">
Some paragraph
</div>
</div>
</div>
Where body-img-wrap img is set to margin-left: -100px;. However, there's a gap that the image creates and the text won't fill it in as it's not in the same column. What we need is for the text to fill in the gap that the image creates when it's offset to the left.
How do we achieve this kind of layout?
Here is my solution,
I divided the image and text into 2 section, Then I gave the width to the text-section equal to width of the image using
width: calc(100% - 200px);
.left-sec {
width: 200px;
height: auto;
}
.right-sec {
width: calc(100% - 200px);
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
</div>
<div class="row">
<img class="left-sec" src="https://placehold.it/200x200" alt="" />
<div class="right-sec">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
</div>
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
</div>
</div>
</div>
</div>
Is it possible to make the columns inside each row the same height as each other? For example to make both the blue headings the same size and so on
Apologies if this has been asked before but I couldn't see an answer to this when searching.
<div class="row">
<div class="column">
<h2>heading</h2>
<div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
<div class="block-2">Lorem ipsum dolor sit amet.</div>
</div>
<div class="column">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
<div class="block-1">Lorem ipsum</div>
<div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
</div>
</div>
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
* {
flex: 1;
}
}
https://jsfiddle.net/vdLaq7t1/
You can do it with align-items: stretch (which is the default value for align-items), but you should redesign your HTML structure.
.column {
background: silver;
}
h2 {
background: cornflowerblue;
margin: 0;
}
.block-1 {
background: tomato;
}
.block-2 {
background: brown;
}
.row {
display: flex;
/* Not required because it's already the default value */
align-items: stretch;
}
.row > *{
flex: 1;
}
<div class="row">
<h2>heading</h2>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
</div>
<div class="row">
<div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
<div class="block-1">Lorem ipsum</div>
</div>
<div class="row">
<div class="block-2">Lorem ipsum dolor sit amet.</div>
<div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
</div>
Flexbox works in both X and Y axis. When you use flex-direction: column you are changing the main axis from X to Y. You can manage the main axis with the justify-content property, and the secondary axis with the align-items property.
The thing is that align-items work with the stretch value, but justify-content cannot.
So if you want the height to be the same (Y axis), you need to stretch it with align-items: stretch, but align-items only works in the secondary axis, so the main axis needs to be the X axis in this case, and that means that you cannot use flex-direction: column in order to make them the same height.
It can be done with many technics.
For example, you can place 6 columns in 1 row.
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 70%;
}
.column.sm {
flex-basis: 30%;
}
.blue {
background: blue;
}
.silver {
background: silver;
}
.cornflowerblue {
background: cornflowerblue;
}
<div class="row">
<div class="column blue sm">heading</div>
<div class="column blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</div>
<div class="column silver sm"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quaerat, facilis qui placeat! Voluptatem reprehenderit similique rerum officia iste error ab, animi nobis quaerat culpa possimus, nisi laboriosam aliquid hic.</div>
<div>Tempora eius eaque harum, temporibus sequi porro, minima quia, necessitatibus amet nisi unde reiciendis iure ipsa, facilis rerum qui dolores doloribus sed voluptatum! Dicta at, qui, exercitationem molestiae voluptas natus.</div></div>
<div class="column silver">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto nemo ipsum voluptates mollitia eius enim, esse voluptatibus eaque doloremque vel asperiores quos unde similique rerum perspiciatis iure, ipsam eum soluta.</div>
<div class="column cornflowerblue sm">lorem</div>
<div class="column cornflowerblue"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore enim recusandae veniam optio delectus doloremque maiores quidem, impedit vel reprehenderit quam vitae, fugit atque assumenda molestiae debitis laboriosam blanditiis fugiat.</div>
<div>Excepturi ea minima accusantium delectus totam quae fugiat, ex eos inventore deleniti odit, commodi eveniet, eum ullam consectetur ipsa quasi odio similique. Doloribus tempore accusantium soluta, id deserunt maxime accusamus.</div></div>
</div>
There are a lot of examples for how to have a fixed width sidebar on Bootstrap 4, but I haven't found one that will cause the main content to disappear on mobile.
I've tried the following:
<div class="row no-gutters flex-nowrap">
<div class="col-md col-12 d-none d-xs-block d-sm-block ">
Main area
</div>
<div class="col-md-4 col-12 sidebar">
Sidebar
</div>
</div>
.sidebar {
max-width: 600px; min-width: 600px
}
And this mostly works, but what happens is that between 768 to 576 pixels the sidebar disappears entirely.
What I'm after is for the sidebar to be a fixed width with the main area shrinking and eventually disappearing.
With few lines of CSS you can achieve this with Flexbox. Please have a look in snippet I added with this answer.
To know more about Flexbox you can checkout those links.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
min-width: 150px;
max-width: 150px;
height: 100%;
background: grey;
padding: 20px;
}
.content {
padding: 20px;
height: 100%;
background: lightgrey;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
</div>
</div>
I believe you're looking for this:
#media (min-width:768px) {
.sidebar {
max-width: 600px; min-width: 600px;
}
}
.sidebar {
background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters flex-nowrap">
<div class="col d-none d-md-block">
Main area
</div>
<div class="col sidebar">
Sidebar
</div>
</div>
I wrapped the fixed size rule in a #media query condition only applying on md and up and I revised classes applied to columns accordingly.
Since you're setting the custom width of your sidebar anyway, you don't need col-* classes on your columns.