Merge columns in Bootstrap vertically - html

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>

Related

Bootstrap-table: Grid system - How to put image with width in different rows and the same column

I want to show in the window-modal the info and image of a product but I do not know to put an image with it large is various rows of the grid.
My code is:
<div class="row">
<div class="row">
<div class="col-md-6 descFields impFields">
CODI
</div>
<div class="col-md-6 .offset-md5">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
EDICIÓ
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
PÀGINA
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
MODIF.
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
USER
</div>
<div class="col-md-6">
</div>
</div>
</div>
I would like that all columns are in the same distance:
I'm trying to use offset parameters and child parameters but It's not working :(

You can rewrite your code structure..
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 descFields impFields">
CODI
</div>
<div class="col-md-12 descFields impFields">
EDICIÓ
</div>
<div class="col-md-12 descFields impFields">
PÀGINA
</div>
<div class="col-md-12 descFields impFields">
MODIF.
</div>
<div class="col-md-12 descFields impFields">
USER
</div>
</div>
</div>
<div class="col-md-6">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
divide grid in 2 section first section for data and second for image...

display columns in AngularJS

I want to display 4 columns in AngularJS:
This is my html so far:
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">Desc1:</div>
</div>
<div class="row">
<div class="col-md-6"> Desc2:</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
{{value1}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value2}}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
Desc1:
</div>
</div>
<div class="row">
<div class="col-md-6">
Desc2:
</div>
</div>
<div class="row">
<div class="col-md-6">
Desc3:
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
{{value1}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value2}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value3}}
</div>
</div>
</div>
What I want to display is something like this:
Desc1 value1 Desc1 value1
Desc2 value2 Desc2 value2
Desc3 value3
For example if one value returns nothing I want that row to be empty. With my current code, if one value returns nothing then the next value gets shifted over and displayed. This messes up everything past that point.

With CSS (which is a better way to go)
.test {
display: inline-block;
margin: 0;
}
<div>
<div>A</div>
<div class="test"></div>
<div>C</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