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
Related
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 have a row with three columns in desktop view
now I want to display middle column under other two columns in a new row
as shown below :
my code for desktop view :
<div class="container">
<div class="row">
<div class="col-md-4">
A
</div>
<div class="col-md-4">
B
</div>
<div class="col-md-4">
C
</div>
</div>
How do I write code for col-sm- ?
What should I do?
You can use order-sm-last class from bootstrap
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
A
</div>
<div class="col-md-4 col-sm-12 order-sm-last">
B
</div>
<div class="col-md-4 col-sm-6">
C
</div>
</div>
Live Working Example
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
I have a bootstrap layout like so:
<div class="container">
<div class="row">
<div class="col-sm-4 top-col-left">
<h4>24 Hour High</h4>
<h1>$7.88</h1>
</div>
<div class="col-sm-4 top-col-center">
<h4>24 Hour Low</h4>
<h1>$1.88</h1>
</div>
<div class="col-sm-4 top-col-right">
<h4>24 Hour Change</h4>
<h1>$2.88</h1>
</div>
</div>
</div>
When viewed on a mobile device the layout will become 3 rows of one column. Is it possible to display this as 1 row of 2 columns and 1 row of 1 column instead?
This will become 2 rows with 2 and 1 columns respectively on xs (<768px) devices
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 top-col-left">
<h4>24 Hour High</h4>
<h1>$7.88</h1>
</div>
<div class="col-sm-4 col-xs-6 top-col-center">
<h4>24 Hour Low</h4>
<h1>$1.88</h1>
</div>
<div class="col-sm-4 col-xs-12 top-col-right">
<h4>24 Hour Change</h4>
<h1>$2.88</h1>
</div>
</div>
</div>
Bootstrap is build around a 12 column grid system, currently your html/css is saying that each column should take up a third of the screen.
If you are wanting to have 2 columns and then wrapped underneath a single column then something like this would work,
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
<div class="col-sm-12"></div>
You can add other classes for larger screens sizes.
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>