New to Bootstrap and using version 5-2-0
In my layout I wanted to have the image of the cat take up one side and then have the content and form on the other size (content first then form underneath) but I can't get it to work.
<div class="grid">
<div class="g-col-6 g-start-1">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-6">form</div>
</div>
Codepen:
https://codepen.io/emmabbb/pen/ExRmgZE
This should do.
Code:
<div class="row">
<div class="col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="col-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
<div>form</div>
</div>
</div>
In you're code, you were missing the stylesheet for https://getbootstrap.com/docs/5.2/assets/css/docs.css.
Also you need to start from g-start-7 (instead of g-start-6) as 1-6 is for the first column and 7-12 is for the second columns
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<div class="grid">
<div class="g-col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-7">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-7">form</div>
</div>
See more details here: https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works
Related
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>
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>
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).
I hope this question makes sense. I'm stummped at what to do. I am currently developing a site where a section of the page will have two seperate background colors (1 for the left and 1 for the right). This is what I am trying to go for:
<div class="gray-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="white-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
I've tried several varations of this, putting rows under the span, putting containers and subrows in the span, but I'm not able to create the affect I want. Can anyone please help out? Thanks!
Update: Heres a JSFiddle of what I am trying to do. It works, but its not in a container to space out the row correctly. When I put it in the container, The blue on the left does not extend all the way.
http://jsfiddle.net/BVmUL/622/
try the following: Bootply demo
<div class="container">
<div class="row">
<div class="span6">
<div class="gray-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="span6">
<div class="white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
</div>
</div>
css:
.gray-bg {
background-color:red;
}
.white-bg {
background-color:green;
}