This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 3 years ago.
I'm trying to make a layout like on the attached picture, so the column on the left span over multiple rows . At the moment my code looks like:
<div class="row my-row">
<div class="col-6 my-col">1</div>
<div class="col-6 my-col">
<div class="row my-row">
<div class="col-lg-12 my-col">2</div>
<div class="col-lg-12 my-col">3</div>
</div>
</div>
</div>
Is it any other/better way to do it?
As well I don't really understand how this code does what it does, so would be nice if someone can explain?
Thanks.
You're doing it correctly for the most part. Bootstrap applies CSS styles to components on your page based on the class name of the component. In order to get items aligned hoizontally across the page, bootstrap uses the "row" class to create a vertical row. Inside of the "row" element, bootstrap sizes elements that are tagged with "col-#" based on the weight of the # following col. col-12 is the maximum width of the container, therefore you can create up to 12 columns (12 col-1's). In your example col-6 is a column that takes up half the page. In order to split the right half of that column further, an additional row is applied, and two more columns are created. These two columns should be col-6 in order to get each column to take exactly half of that row.
After these components you just need one more row and to get 1/3 of a row you will need three col-4 elements to create the last row. (4+4+4 = col-12 = full row)
Furthermore, Bootstrap not has the ability to automatically detect the size of a column (if you want them all equal). To take advantage of this, you don't need to put any number after col, just provide an element with a class of col inside a row and bootstrap will auto-size them to be equally spaced columns.
Bootstrap has extensive documentation for more help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 col-sm-6 d-flex align-items-center">
1
</div>
<div class="col-md-8 col-lg-8 col-12 col-sm-6">
<div class="row">
<div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
2
</div>
<div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
3
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
4
</div>
<div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
5
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
6
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
7
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
8
</div>
</div>
</div>
</section>
</body>
</html>
Try this out! It'll also vertically align your contents as you've showed on the image.
For reference go through https://getbootstrap.com/docs/4.0/utilities/flex/ this link. Also if you want it to be centered horizontally use .justify-content-center
id use something like this
<div class="row">
<div class="col-4">
1
</div>
<div class="col-8">
<div class="row">
<div class="col-6">
2
</div>
<div class="col-6">
3
</div>
<div class="col-6">
4
</div>
<div class="col-6">
5
</div>
</div>
</div>
<div class="col-4">
6
</div>
<div class="col-4">
7
</div>
<div class="col-4">
8
</div>
</div>
The trick is to use rows withing another column that's already there. This will let you have 2-> 5 within what looks like a column from 1.
6->8 can just be 3 col-4's in one row / the same row
Related
Here is my code
<div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="...</p>
</div>
</div>
</div>
As you can see row-cols-sm-1 is set to one, but when setting the view to a phone in Google Chrome's dev tools, the page shows two cards per row when it should only be one. If I remove the sm-1 class and put md-1 then it will show one card per row, but I really want md to be set to two.
What your example
<576px row-cols-1 one card for this size
≥576px row-cols-sm-1 one card for this size
≥768px rows-cols-md-2 two cards
≥992px row-cols-lg-3 three cards
≥1200px three cards
Here an example with use a class in each column. If you use a framework you will loop and write one simple class. col-md-6 col-lg-4
<div class="container">
<div class="row ">
<div class="col-12 col-md-6 col-lg-4">
<div class="card ">card</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card ">card</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card ">card</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card ">card</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card ">card</div>
</div>
</div>
</div>
I'm so surprised that nobody is able to answer such a trivial question!
Because you're missing this meta in the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I'm struggling right now with the order of the columns and rows of a bootstrap layout and I'm wondering if what I'm trying to do is even possible using bootrsap's rows/columns grid system.
So, I have the following layout for large devices:
And I want the columns to be reoredered on small devices like this:
Problem is... I have this "column 2" and I can't break it in two parts :D
Is there another way to achieve the same kind of layot using bootstrap?
Thanks in advance!
Edit
So, the large devices layout would be something like the this:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8">
<div>
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
<div class="row">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
See it on codepen: https://codepen.io/lucas-labs/pen/yLLeVxO
To change the column order, the columns must share the same parent. The only way to get this to work in Bootstrap 4 would be to disable the flexbox on lg and use floats.
<div class="container-fluid">
<div class="row mainrow d-lg-block d-flex overflow-auto">
<div class="col-12 col-lg-8 first-column float-left">
<div class="big-data-table">
Imagine a big data table here
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right order-first">
<div class="row myrow">
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
<div class="col-12">
Columns inside row 2
</div>
</div>
</div>
<div class="col-12 col-lg-4 second-column float-right">
<div class="row myrow">
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
<div class="col-12">
Columns inside row 3
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/V9eB4jUNhw
I am trying to use two column divisions in same line.
Check my code:
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Left Div
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Right Div
</div>
</div>
</div>
this structure responsive for till 574px. but when i reduce browser size after 574px, divisions show in two rows. but my requirement show it in same line (left & Right)
please check above image. that the issue.
You can set same divided columns for every screen using col class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col bg-success">
Left Div
</div>
<div class="col bg-warning">
Right Div
</div>
</div>
</div>
</div>
bg-success and bg-warning is just for color
<div class="col-12 ">
<div class="row">
<div class="col-6">
Left Div
</div>
<div class="col-6">
Right Div
</div>
</div>
how can I center my main container horizontally, using excising bootstrap classes
here is the container:
<div class="container-fluid main-container">
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
The way it looks now
Here you go with a solution https://jsfiddle.net/w4gLtcz5/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
<div class="row">
<div class="col-md-offset-1 col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
In bootstrap, by default there is 12 columns.
Since your container is occupying 10 columns out of 12, so started your container from 2 column instead of column 1. So that in both the side of the container you will have equal space.
I considered col-md-10 is your number of columns
I have added col-md-offset-1.
Please use col-xs-offset-x
Instead of x you can write number between 1 to 12.
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns:
Your code will be.
<div class="container-fluid main-container">
<div class="col-md-10 content col-xs-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Edit existing questions
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
Reference link https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp