I want to set image text after the till(calender)
like this:-
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-2">
<label><strong>Erbjudande</strong></label>
</div>
<div class="col-md-2">
<label><strong>Tillgangligt</strong></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><small>Laddsuppfill</small></label>
</div>
<div class="col-md-4">
<label><small>Fran</small></label>
</div>
<div class="col-md-4">
<label><small>Till</small></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-md-2">
<label><strong>Antal</strong></label>
</div>
<div class="col-md-2">
<label><strong>Giltigt</strong></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label><small>Ange antial</small></label>
</div>
<div class="col-md-4">
<label><small>Fran</small></label>
</div>
<div class="col-md-4">
<label><small>Till</small></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<small><input type="text" placeholder="600" style="width:100px" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-3">
</div>
<div class="col-md-5">
<button type="button">Avsluta</button>
<button type="button">Redigera</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>status</label><strong>Aktiv</strong>
</div>
</div>
</div>
<div class="col-md-6">
#*here copy same above whole content left side*#
</div>
<div class="col-md-6">
#*here copy same above whole content right botom side*#
</div>
<div class="col-md-6">
#*here copy same above whole content left botom side*#
</div>
</div>
what I am trying see below code I am continuously divide a partision but image text not set after the till calender section
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
I am trying bootstrap partion like(4 3 3 2) and(4 4 3 1) but not work
I want to add image text after the till calender see image please
The columns in that specific row are not indeed 4 4 3 1, but 4 4 4 1.
I'm sure you just overlooked it.
<div class="row">
<div class="col-md-4">
<small><input type="file" /></small>
</div>
<div class="col-md-4">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-3">
<small><input type="date" placeholder="2020-05-21"></small>
</div>
<div class="col-md-1"> **//here I am facing issue //here I am trying to set image text after the till calender**
Image
</div>
</div>
Here I fixed it.
Bootstrap cols can max be divided in 12 parts. -> 12 = full width
You are trying 4 4 4 1 = 13 so you get
4 4 4
1
You should try something that sums up to 12. like below
4 4 3 1 or 3 3 3 3
if sum exceeds 12, it will get on next line.
Related
I want to make the following layout using bootstrap
my problem is that I do not know how to give div one (1 in picture) following height
Here is a working example : https://codepen.io/pof/pen/abWqgjJ
and the basic layout could look like that :
<div class="row">
<div class="col-6">
Picture 1
</div>
<div class="col-6">
<div class="row">
<div class="col-6">
Picture 2
</div>
<div class="col-6">
Picture 3
</div>
</div>
<div class="row">
<div class="col-6">
Picture 4
</div>
<div class="col-6">
Picture 5
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
Picture 6
</div>
<div class="col-6">
Picture 7
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-6">
Picture 8
</div>
<div class="col-6">
Picture 9
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
Picture 10
</div>
<div class="col-6">
Picture 11
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-6">
Picture 12
</div>
<div class="col-6">
Picture 13
</div>
</div>
</div>
</div>
But maybe I'm missing something... Can you provide your code ? Which version of bootstrap are you using ?
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>
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 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>
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>