I'm starting to get really lost in the whole Bootstrap/flexbox grid system. I'm trying to achieve a dynamic, 2 column layout with one large col-sm-12.col-md-12.col-lg-8 and two small columns of: col-sm-12.col-md-6.col-lg-4
This is what I want for large screens:
and this for medium-sized screens:
But, this is what I get!:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" initial-scale="1">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-sm-12 col-md-12 col-lg-8">
<p> Lots of text </p>
</div>
<div id="small1" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
<div id="small2" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
This seems like an ideal opportunity for a nested grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
In the above example your primary grid has two columns; the first is 12-columns wide at all breakpoints below lg. At lg it is 8-columns wide. The second column follows the same pattern but at lg it is 4-columns wide.
Inside the second column we have the nested grid. This has a different breakpoint for each column: 6-columns wide for breakpoints below lg and at lg each column is 12-columns wide.
You can use the following solution:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p><b>1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-12 col-md-6 col-lg-12">
<p><b>2</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-12 col-md-6 col-lg-12">
<p><b>3</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
What is happening for different devices?
small view (like iPhone 6):
All columns have the same full width (col-12) of the device. I don't recommend to create two columns for column number 2 and 3.
medium view (like iPad):
The first column is full width (col-12) and above the columns 2 and 3. The columns 2 and 3 are in one row with same width (col-6), next to each other.
large view (like Desktop / Laptop):
The column 1 is using 2/3 of the width. The columns 2 and 3 are on the right column (1/3 of width), about each other.
To check the different breakpoints I recommend the browser plugin (Google Chrome) Window Resizer or the device toolbar on Google Chrome (Ctrl + Shift + M on developer tools F12).
Related
I have an 8 columns grid, in which I want to distribute content, text and an image, as follows:
<div className="grid grid-cols-8 gap-4">
<div className="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
tempora perferendis tenetur quia vitae blanditiis, excepturi quo
inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
at? Fuga ipsa unde consectetur nobis consequatur tempore
asperiores, quos alias similique, rerum nemo illo qui quidem
accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
obcaecati accusamus quam eius doloremque. Error dignissimos modi
eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
commodi amet repudiandae ut ab quos. Reiciendis officia placeat
harum nulla obcaecati magni accusantium dolorem architecto ullam,
ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div className="col-start-6 col-end-8">
<img alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
The code above produces this result on a 1200px screen:
And this one on an 800px screen:
How can I have the image responsive, and get its height adapt to the text content on the left, so the vertical side of the image always takes the height of the text regardless of screen-size?
Tailwind-play
If you can use flex this would be simplest of all in my opinion:
<div class="flex">
<div class="mr-8 w-8/12">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="w-4/12 bg-cover bg-center" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
tailwind play
Note: Width uses standard 2, 3, 4, 5, 6, 12 columns there is no 8 columns
The easiest(I think) would just be to set the second column to have a background image instead of an image inside, such as:
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis,
excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis
consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates
deleniti praesentium sint? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error
dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab
quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque
distinctio consectetur esse deleniti. </p>
</div>
<div class="col-start-6 col-end-8 bg-center bg-cover" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
If you don't care about the aspect-ratio of the image then you can always use flex.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8">
<img alt="dummy" className="" src="https://via.placeholder.com/300x500" />
</div>
</div>
Or if you do care about the aspect-ratio and don't care if the image gets cropped then you can set it as a background in the second div.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8" style="background: url(https://via.placeholder.com/300x500)">
</div>
</div>
You can stretch the image to cover whole parent and then use object-fit to adjust clipping:
<img class="h-full w-full object-cover">
This will crop sides and show largest possible area, object-contain will show full image. No object-* or object-fill will deform it.
<script src="https://cdn.tailwindcss.com/"></script>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores,
quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia
placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div class="relative col-start-6 col-end-8">
<img class="absolute h-full w-full object-cover" alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
I have three articles aligned horizontally with the same structure:
date, title, event time, location, image, text, button
I want them to have the same height (based on the longest article) which I can get to work.
The problem I am having is that I want each section of the same height and the next section needs to start at the same height in all the three articles.
I tried many solution (css flex, grid) but I can't make them work because of the nested div structure (which is pre-generated by the CMS I am using).
Here is the code:
<div id="container">
<article id="node-1">
<div class="event-start">
<span class="event-year">2021</span>
<span class="event-start-month">Feb</span>
<span class="event-start-day">18</span>
</div>
<div class="event-content">
<header class="node-header">
<h1 class="event-title">
Test Event
</h1>
</header>
<div>
<div class="field-name-field-date">
<div>
<div class="event-time">
<span>6:30pm</span>
</div>
</div>
</div>
<section class="field-name-field-event-location">
<h2 class="field-label">Location: </h2>
<div>
<div class="event-location">Test Location</div>
</div>
</section>
<div class="field-name-body">
<div>
<div>
<p>
<img> Image here</img>
</p>
<p> Text here
</p>
</div>
</div>
</div>
</div>
</div>
</article>
<article>
</article>
<article>
</article>
</div>
Example:
If the first article has a very long title and the header results in 300px height, also the other two articles (with shorter titles) should have 300px height. And consequently, the next item (event time) should start at the same height in all the articles.
Without more code (html/css) it is hard to see the traps to solve this question. But one aproach to your question is to set elements to same height with JS.
Lets say:
article-elements --> same height
title-elements --> same height
and so on ...
For this you can use a JS snippet like following:
function sameHeight( selector ){
const $elements = document.querySelectorAll( selector );
let maxHeight = 0;
for(let actualElement of $elements){
actualElement.style.height = '';
maxHeight = ( actualElement.offsetHeight > maxHeight ) ? actualElement.offsetHeight : maxHeight;
}
for(let actualElement of $elements){
actualElement.style.height = maxHeight + 'px';
}
}
// parameter selector
// 'string'
// use every valid css selector (with '.' and '#' included to the string)
(Please adapt code to your necessities.)
For such Condition you can simply use bootstrap's Row, col by bootstrap and gain desired result
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptate deleniti quae, dolorem fugit temporibus! Beatae, reiciendis optio? Iure perferendis illo eveniet reprehenderit obcaecati tempore quae animi dolores porro tempora ipsam, cumque, rerum in consectetur omnis! Numquam, dolor est! Qui quasi placeat veniam voluptatum nostrum? Consectetur tempore ipsam modi perferendis vitae est ut quia totam, ipsum ducimus dolorem. Commodi doloribus alias tempore quam, pariatur saepe ad! Totam ex itaque harum soluta explicabo magnam, officia eos officiis porro dolores, quo dolorum? Amet saepe unde cupiditate mollitia sequi modi est veniam beatae porro cumque, natus ipsum rem excepturi nesciunt at quibusdam dolorem?</p></div>
<div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, saepe!</p></div>
<div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ad rerum, odio quis omnis laborum corporis hic, pariatur, labore quidem odit adipisci veritatis ratione. Consectetur ducimus impedit provident eligendi delectus!</p></div>
</div>
<div class="row">
<div class="col-md-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor vel corporis laboriosam reiciendis aliquid harum laudantium autem nesciunt illo soluta!</div>
<div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quibusdam vel distinctio, adipisci recusandae necessitatibus deserunt sint mollitia consequatur tenetur consectetur at, facere doloribus unde. Non dicta ducimus rerum voluptate repellendus nam dolore ab, voluptatem sequi corrupti iste tempora possimus commodi distinctio quae, hic aspernatur deleniti omnis. Rerum, quaerat illo!</p></div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,
#import "../node_modules/bootstrap/scss/grid"
This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )
Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...
Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...
Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question
header{
position:fixed;
top:0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position:fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>
You should really read the docs since the markup has several problems. Bootstrap 5 beta has the same grid rules as Bootstrap 4...
rows are wrappers for columns. This means only columns should be placed in rows, and columns shouldn't be placed directly in other columns.
g-0 (no gutters) should be on the row, not the container
there is no -xs infix. for example use col-12 not col-xs-12
<header>
<div class="row">
<div class="col-12">Header </div>
</div>
</header>
<div class="container-fluid">
<div class="row g-0">
<div class="col-4">
<div class="row">
<div class="col-12" id="sticky-sidebar"> Menu </div>
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
</main>
<footer style="text-align: center;"> © Footer 2021 </footer>
</div>
</div>
</div>
Demo
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).
I'm trying to create a layout like this:
http://jsfiddle.net/LLbnhb9v/
Basically, A and C are sidebar items, and B is the main content:
My markup is as follows:
<div class="container">
<div class="col-sm-2">
A
</div>
<div class="col-sm-8">
B
</div>
<div class="col-sm-2">
C
</div>
</div>
This works for the mobile, but on the desktop C is positioned below B. How can I make B (the main content) "span" across multiple rows without any insane css tricks?
You need to have the pink section have the pull-right class and the green section to have a clearfix class.
http://jsfiddle.net/LLbnhb9v/19/
<div class="container">
<div class="col-sm-2">
<div class="x a">
short<br>text
</div>
</div>
<div class="col-sm-10 pull-right">
<div class="x b">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="x c">
short<br>text
<div>
</div>
</div>
I also changed the layout a little bit. The first level of divs should only worry about layout. If you add padding and margins and stuff then they can have some issues and not work as expected. I moved the a b c and x classes onto sub elements.