This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 3 years ago.
In Bootstrap, are we able to do something like this? A full column first and two stacked columns beside it. I tried nested grid but it is not working.
Try out this.i will explain this if the answer is correct
<div class="row ">
<div class="col-md-6 col-sm-6 p-0">
<div class="bg-dark">
my life its always null..
</div>
</div>
<div class="col-md-6 col-sm-6 p-0 ">
<div class="row ">
<div class="col-sm-12 bg-primary ">
THE Iternal Love 1
</div>
<div class="col-sm-12 bg-primary ">
THE Iternal Love 2
</div>
</div>
</div>
</div>
Try this
<div class="row">
<div class="col-sm-6">
Content
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Content2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Content3
</div>
</div>
</div>
</div>
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
Closed 9 days ago.
I want to align the image to center each text. Below is my code. I tried it using container,. but it doesn't work.
and below is the picture.
<section id="features">
<!-- <div class="container-fluid"> -->
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature1.png" alt="feature1">
<h3 class="features-title">Food Listing.</h3>
<p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature2.png" alt="feature2">
<h3 class="features-title">Matchmaking</h3>
<p class="features-prgrph">Find people in your area looking for food.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature3.png" alt="feature3">
<h3 class="features-title">Request System.</h3>
<p class="features-prgrph">Request food from other users with a few taps.</p>
</div>
</div>
<!-- </div> -->
</section>
Try this,
Add text-center each one like this,
<div class="col-md-4 col-sm-12 title-text text-center">
Code:
<section id="features">
<!-- <div class="container-fluid"> -->
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature1.png" alt="feature1">
<h3 class="features-title">Food Listing.</h3>
<p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
</div>
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature2.png" alt="feature2">
<h3 class="features-title">Matchmaking</h3>
<p class="features-prgrph">Find people in your area looking for food.</p>
</div>
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature3.png" alt="feature3">
<h3 class="features-title">Request System.</h3>
<p class="features-prgrph">Request food from other users with a few taps.</p>
</div>
</div>
<!-- </div> -->
</section>
Output:
Add the class text-center in the div with the class title-text.
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I have a layout I am trying to achieve.
Col 1 | Col 2 | Col 3
Col 2 is "col-md-6 col-lg-6" and Col 1 and Col 3 are "col-md-3 col-lg-3" respectively
I want something like this:
However I end up with everything on one side like this:
And if I try and use pull or push classes I end up with unwanted spaces:
Here is some sample code that is close to what I have:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content1
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
content2
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content3
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content4
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content5
</div>
</div>
Thanks in advance!
Try this way to get the first image like result
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-danger">1</div>
<br />
<div class="bg-danger">2</div>
</div>
<div class="col-6">
<div class="bg-danger">3</div>
</div>
<div class="col-3">
<div class="bg-danger">4</div>
<br />
<div class="bg-danger">5</div>
</div>
</div>
Or another way to put columns inside a column
<div class="row">
<div class="col-3">
<div class="row">
<div class="col-12">
<div class="bg-danger">1</div>
</div>
<div class="col-12">
<div class="bg-danger">1</div>
</div>
</div>
</div>
<div class="col-6">
<div class="bg-danger">3</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12">
<div class="bg-danger">1</div>
</div>
<div class="col-12">
<div class="bg-danger">1</div>
</div>
</div>
</div>
</div>
</div>
and to control height you can use
That will make all elements with the same height.
and don't put it if you want the height to be as the content of each column.
.row {
display: flex;
align-items: stretch;
}
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
My normal layout is:
|A||C|
|B||C|
There are two columns - left and right.
'A' and 'B' are two rows of left column
'C' is right column.
When I resize, i want it to respond like:
|A|
|C|
|C|
|B|
Code:
<div class="container row">
<div class="col-sm-8">
<div class="row">
a
</div>
<div class="row">
b
</div>
</div>
<div class="col-sm-4">
c
</div>
</div>
I think I have found the solution based on Dan's
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
<div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
<div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
</div>
</div>
</div>
Based on my understanding of your needs this is how you accomplish your reordering using bootstrap the way it was intended:
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">a</div>
<div class="col-sm-6 col-xs-12">c</div>
<div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
<div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
</div>
</div>
jsFiddle
Here's a link to the official bootstrap documentation on ordering.
Update based on comments:
Here's a solution using bootstrap exclusively:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12 col-xs-12">a</div>
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12 visible-xs">c</div>
<div class="col-sm-6 col-xs-12 visible-xs">b</div>
</div>
<div class="col-sm-6 hidden-xs">
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12">b</div>
</div>
</div>
</div>
jsFiddle
.col-*-push-* and .col-*-pull-* are used to reorder columns for differnt screen sizes. So you would use .col-sm-pull-6 on column C2 and .col-sm-push-6 on column B. Simply adjust the amount of columns you need to push / pull to your layout.
Learn more at : getbootstrap.com/css/#grid
could also use float as a solution (if you don't feel like using push/pull)
HTML
<div class="row">
<div class="col-sm-6 col-xs-12 a">
AAA
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 b">
BBB
</div>
</div>
Css
.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
#media screen and (max-width:767px){
.c{float:none;}
Here's a jsfiddle jsfiddle
I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.
I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..
Here is a quick example I made in paint:
The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.
I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.
However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..
I can add code once I get an approach if I am still stuck.
I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.
Hoping someone has done something like this, or can see by my image, how to approach this.
Can you show your HTML/CSS to see where and why the code broke ? As you approach is correct, I would have done the same. see below
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
Try something like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
row1-col1
<div class="row">
<div class="col-sm-6">
Sub-row1-Sub-col1
</div>
<div class="col-sm-6">
Sub-row1-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row2-Sub-col1
</div>
<div class="col-sm-6">
Sub-row2-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row3-Sub-col1
</div>
<div class="col-sm-6">
Sub-row3-Sub-col2
</div>
</div>
</div>
<div class="col-sm-6">
row1-col2
</div>
</div>
<div class="row">
<div class="col-sm-3">
row2-col1
</div>
<div class="col-sm-3">
row2-col2
</div>
<div class="col-sm-3">
row2-col3
</div>
<div class="col-sm-3">
row2-col4
</div>
</div>
<div class="row">
<div class="col-sm-3">
row3-col1
</div>
<div class="col-sm-3">
row3-col2
</div>
<div class="col-sm-3">
row3-col3
</div>
<div class="col-sm-3">
row3-col4
</div>
</div>
</div>
You have just to annidate more rows inside an existing column.
Eg:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
</div>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<div class="col-lg-3">5</div>
<div class="col-lg-3">6</div>
</div>
</div>
<div class="col-lg-6">Big content</div>
</div>
</div>