Reordering column groups in bootstrap - html

I have a content that looks like this in large screens:
1 2
3 4
5 6
And I want it to look like this in smaller screens
1
2
3
4
5
6
But instead it looks like this:
1
3
5
2
4
6
How can i pull this off?
My html is something like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<p> Content1 </p>
<div class="row">
<div class="col-sm-4">
<img src="Content3-img" alt="">
</div>
<div class="col-sm-8">
<p> Content3 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="Content5-img" alt="">
</div>
<div class="col-sm-8">
<p> Content5 </p>
</div>
</div>
</div>
<div class="col-lg-6">
<p> Content2 </p>
<div class="row">
<div class="col-sm-4">
<img src="Content4-img" alt="">
</div>
<div class="col-sm-8">
<p> Content4 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="Content6-img" alt="">
</div>
<div class="col-sm-8">
<p> Content6 </p>
</div>
</div>
</div>
</div>
</div>


<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content1-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 1 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content2-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 2 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content3-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 3 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content4-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 4 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content5-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 5 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content6-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 6 </p>
</div>
</div>
</div>
</div>
</div>


Your bootstrap columns should be direct children of the .row bootstrap class. This way you can easily get the results you want.
<div class="container">
<div class="row">
<div class="col-lg-6">
<!--Your content-->
</div>
<div class="col-lg-6">
<!--Your content-->
</div>
<div class="col-lg-6">
<!--Your content-->
</div>
.
.
.
</div>
</div>

Related

How to change the image positions in bootstrap html

I'd like to know how to replace the position for the image from right side to left side and the text from right side to left side
my code is :-
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>

There you go. to change the text from right to left just use the class text-left and if you want it to the right use text-right do the same for the image container
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<!-- added class text-left -->
<div class="heading_main text_align_left text-left">
<h2><span> TT </span> ERP </h2>
</div>
<!-- added class text-left -->
<div class="full text-left">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- added class text-left -->
<div class="full text-left">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>

if you only want to show image in left side and text in right side then the image column should be there after the text column
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>

Swapping the elements should be helpful.
<div class="section margin-top_50">
<div class="container">
<div class="row">
<!-- Was in 2nd previously -->
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<!-- Was in 1st previously -->
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>

Merge columns in Bootstrap vertically

i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:

You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>

Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>

How to create these Bootstrap columns?

How do I create Bootstrap columns such as photo attached below? The red line is the same size?

Read about Nesting columns in the BS docs. Also read about Responsive column resets.
To answer your question more directly - here is what you need:
<div class="container">
<div class="row">
<div class="col-sm-4">
1.1
</div>
<div class="col-sm-4">
1.2
</div>
<div class="col-sm-4">
1.3
</div>
<div class="clearfix"></div>
<div class="col-sm-8">
2.1
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
2.2T
</div>
<div class="col-sm-12">
2.2B
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-4">
3.1
</div>
<div class="col-sm-4">
3.2
</div>
<div class="col-sm-4">
3.3
</div>
<div class="clearfix"></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
4.1T
</div>
<div class="col-sm-12">
4.1T
</div>
</div>
</div>
<div class="col-sm-8">
4.2
</div>
</div>
</div>

Align divs from different columns - Twitter bootstrap

I am using twitter bootstrap and trying to align two divs that belong to different columns.
The code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>header1</h2>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<h2>header2</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
</div>
<div class="col-md-6">
<h2>header3</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
<h2>header4</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
</div>
</div>
</div>
The above code produces the layout below:
Is there any way to align vertically header4 with header2 (and thus leave space between the end of the div of header3 and the start of the div of header4?
Edit: when I resize my window and make it smaller I want to keep (header1 and header2) AND (header3 and header4) together (ie header2 below header1). This is the current case in the provided html code.
Thank you

There is - you need to alter your HTML so instead of simply having a two column layout, you have a grid based two row two column layout, e.g (simplified)
<div class='row'>
<div class='col-md-6'>
<h1>Header 1</h1>
</div>
<div class='col-md-6'>
<h1>Header 3</h1>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<h1>Header 2</h1>
</div>
<div class='col-md-6'>
<h1>Header 4</h1>
</div>
</div>

CSS div position for magazine-like theme

I'm using twitter bootstrap 3 for the CSS framework. Basically I have 2 rows with 3 columns of articles.
Option 1
first approach which is using below code (skeleton), Im able to follow exactly like sample design (div in column will position to below) but if Im using this approach, is hard to integrate with backend.
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>
Option 2:
So, i try using this approach, but Im unable to remove the gap between 2 div. Please help
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>

Have a look at plugins like Wookmark or Masonry