This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Closed 4 years ago.
I am trying to use the bootstrap 4 grid system to center a single column. In bootstrap 3 I was able to do:
<div class="col-md-10 col-md-offset-2">
</div>
In bootstrap 4 the same does not work even when using the new offset class: offset-md-2.
The following works, but something feels wrong about having empty columns on the page, just to center a col-md-5.
<div class="row">
<div class="col"></div>
<div class="col-md-5 align-self-center">
<img src="img/myimage.gif" style="width: 100%;">
</div>
<div class="col"></div>
</div>
As per the documentation you can use justify-content-center on the row to center any number of columns in a row.
<div class="row justify-content-center">
<div class="col-4">
One centered column
</div>
</div>
You can add
justify-content-center
on "row" div.
so it would be something like this:
<div class="container">
<div class="row justify-content-center">
<div class="col-2">
//content ...
</div>
</div>
</div>
This is an example from the official bootstrap documentation
https://getbootstrap.com/docs/4.0/layout/grid/
Related
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
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
This question already has answers here:
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
(1 answer)
Bootstrap with different order on mobile version
(3 answers)
Closed 3 years ago.
I have the following order of cols in Bootstrap in desktop screen:
COL-A COL-B COL-C
<div class"container">
<div class="row">
<div class="col-lg-4 col-md-4">Text 1</div>
<div class="col-lg-4 col-md-4"><img src="myimage"></div>
<div class="col-lg-4 col-md-4">Text 2</div>
</div>
</div>
When I change my screen to medium size (min width: 768px to 990px), I want to achieve the next:
Thanks in advance for your help.
If I'm understanding your diagram, just do two columns of half-width, with the 2nd column having two rows within it containing full width columns.
Something like:
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">
<div class="row">
<div class="col">Column 2</div>
</div>
<div class="row">
<div class="col">Column 3</div>
</div>
</div>
</div>
The sm breakpoints and width numbers should be optional if you're only doing these.
This question already has answers here:
Bootstrap Grid System new line does not look nice
(4 answers)
Closed 6 years ago.
I have 4 divs, div 2 is very lengthy,
div 1,3,4 are of equal sizes,
I want them to display in a compact form,
but it displays full contents of div2 then only displaying div3 ,it displays div 3 as a new row after all the contents of first row
<div class ="row">
<div class="col-xs-12"> //content 1 </div>
<div class="col-xs-12"> //content 2 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 3 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 4 </div>
</div>
please help me
Solved the problem myself
Used row inside col div
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
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>