If I have two column in desktop, can I convert this two column into four column in tablet view.
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
if it is not possible with bootstrap, Is it possible with Tables?
change your div class to "col-xs-3" and allocate a width and height.
JSFiddle here
Full code:
HTML
<div class="row">
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
<div class="col-xs-3">div</div>
</div>
CSS
div {border: 2px black solid; width:100%;}
Have a look at a technique called 'Scaffolding'
Boostrap 3 also offers a whole new range of features for the grid system and media queries, check out this blog post
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
Related
this is my page structure
HTML
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12" style="height:80px">
1st
</div>
<div class="col-md-12" style="height:50px">
3rd
</div>
<div class="col-md-12" style="height:50px">
5th
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12" style="height:50px">
2nd
</div>
<div class="col-md-12" style="height:40px">
4th
</div>
<div class="col-md-12" style="height:90px">
6th
</div>
</div>
</div>
</div>
</div>
I made a jsFiddle for it
https://jsfiddle.net/ytke8mn3/
I marked the columns with 1st,2nd,3rd,4th,5th,6th
The issue I'm facing is after resizing my page to a certain width in bootstrap below 992px.
I would like the columns to show in this order > 1st,2nd,3rd,4th,5th,6th
rather than 1st 3rd 5th 2nd 4th 6th
How to achieve this. Thanks
I found something that worked for me, it aligned the elements very well for me. I'm happy with it so far. it required a little bit of dom element restructuring(less written code) but that's okay.
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8" style="height:80px">1st</div>
<div class="col-md-4" style="height:40px">2nd</div>
<div class="col-md-8" style="height:40px">3rd</div>
<div class="col-md-4" style="height:80px">4th</div>
<div class="col-md-8" style="height:80px">5th</div>
<div class="col-md-4" style="height:30px">6th</div>
</div>
</div>
https://github.com/desandro/masonry
I don't know how it is implemented but it's working. below is a jsfiddle
https://jsfiddle.net/p5u976mt/
The outer containers col-md-8 and col-md-4 make it impossible to reorder it the way you want to with https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
You could hide the two outer containers and show a third one only for narrow device-widths with the 6 elements in the right order (would be very easy but a bad practice, because you repeat yourself).
I am not sure what exactly your actual requirement is. You can try the following bootstrap structure to get this ordering correctly.
Fiddle goes here
.row {
background: #f8f9fa;
}
.row > div {
border: solid 1px #6c757d;
}
So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.
What I currently have :
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png
What I'm trying to achieve :
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png
This is the code I currently have with some sample text to try to delimiter each section :
<div class='container-fluid'>
<div class="row">
<div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
STATUS
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
L
</div>
<div class="col-md-3">
SOME TEXT ASDASDASDJLASDJKLASDJAD
ASDASDLASKD
aASDASDK:ASDKASDK
ASDASJDASDASDKASJDASDJ
</div>
<div class="col-md-9">
L
</div>
</div>
</div>
To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.
The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
3
</div>
<div class="row">
3<br>
wide<br>
but<br>
taller
</div>
<div class="row">
3
</div>
<div class="row">
3
</div>
</div>
<div class="col-sm-9">
9
</div>
</div>
</div>
JSFiddle for a live example.
You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them.
<div class="container-fluid">
<div class="row" >
<div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
<div style="min-height:10vh">10vh</div>
<div style="min-height:20vh">10vh</div>
<div style="min-height:10vh">10vh</div>
<div style="min-height:10vh">10vh</div>
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
</div>
</div>
i am trying to make site navigation through Bootstrap Grid system.
I want to make 3 columns with two rows with this layout:
|Title | |Login|
|Subtitle|Menu buttons| |
Code works correctly, until i set font-size for title and subtitle. Can anybody help me? Snippet: http://www.bootply.com/GLEf6MfmxE
HTML:
<header>
<div class="container">
<div class="row">
<div class="col-xs-4" id="title">Foo title</div>
<div class="col-xs-6"></div>
<div class="col-xs-2">Login</div>
<div class="col-xs-2" id="subtitle">Bar subtitle</div>
<div class="col-xs-1">Menu 1</div>
<div class="col-xs-1">Menu 2</div>
</div>
</div>
</header>
Custom CSS:
#title{
font-size: 2em;
}
#subtitle {
font-size: 1.5em;
}
you need to learn that, for the different row, you have to use another row class as you are working on two row so each column must be on their own row class like this check the following code. i am sure this code will help you to understand.
<header>
<div class="container">
<div class="row">
<div class="col-xs-4" id="title">Foo title</div>
<div class="col-xs-6"></div>
<div class="col-xs-2">Login</div>
</div>
<div class="row">
<div class="col-xs-2" id="subtitle">Bar subtitle</div>
<div class="col-xs-1">Menu 1</div>
<div class="col-xs-1">Menu 2</div>
</div>
</div>
</header>
Regards
Bootstrap's grid system allows up to 12 columns across the page, so you have to fill 12 columns for row.
Look at this: http://www.bootply.com/SRezJSXWsE
ps: As you can see I update the css too, in order to align your Login to the right.
I was trying to make three equal columns in js fiddle and they display as separate rows for some reason. What have I done wrong?
JSFiddle
<div class="container">
<div class="row">
<div class="col-md-4">
cczfsd
</div>
<div class="col-md-4">
sfdfds
</div>
<div class="col-md-4">
sdfssd
</div>
</div>
</div>
hi as your is working perfect for the desktop screens properly it is not working for the mobile,tablet and other small resolution devices so that you can't getting done your output
i think there is no issue of including the bootstrap's css again because it's already loaded i think issue is with this of managing the screen wise
here is the code may you want the output please look it out'
.temp{
background-color:#e2e2e2;
border:1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 temp">
cczfsd
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sfdfds
</div>
<div class="col-md-4 col-xs-4 col-sm-4 temp">
sdfssd
</div>
</div>
</div>
and here is the demo working code for this
DEMO CODE
In this case, flex display would come in handy.
<div class="container">
<div class="row">
<div>cczfsd</div>
<div>sfdfds</div>
<div>sdfssd</div>
</div>
</div>
CSS
.row {
display:flex;
}
If you are not using boostrap, add following css to get the correct output.
.col-md-4 {
width: 33.3333%;
float:left;
}
JsFiddle
Make sure whether you have included bootstrap css properly in that html else check that link is working properly.
Add bootstrap in fidlle
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
Then re-size the output box.` Works as intended.
I am having an issue with a dynamic form I am creating on my page.
I have a Row that contains 1 or more Divs that are 4 col in length. I would expect that after ever 3, it moves the next one down as it hits the 12 col limit.
Looking at the picture below, after we hit the first three fields I would think it would move the others down to their own row.
Here id the HMLT that my data is in. As you can see, each one is its own col within the row.
Is there something I am doing incorrectly with the way I have this formatted? Just not sure what else to try.
I believe it is proper to create a .row for every row on the page:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I had the same problem yesterday, what I found is that the container should have the col length specified in order to fix the problem.
Also I found useful to add additional divs in order to fix better the length of the fields.
My example:
<div class="form-group col-md-12">
<div class="row">
<div class="form-group col-md-3">
your label data
</div>
<div class="form-group col-md-4">
your input data
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
your label data
</div>
<div class="form-group col-md-3">
your input data
</div>
</div>
</div>
I hope it helps.
It's hard to tell from your screenshot, but it looks like you have the whole thing (rows, columns, and some form groups) inside of a span element. Try using a div instead.
The problem: http://jsfiddle.net/24doudo0/
This seems to be an issue with how bootstrap handles grid wrapping. It doesn't handle as nicely as we would like. I can think of two solutions to this problem. The first is to insert rows after every third column when you loop over them in the backend. For that you can use the modulus operator. I don't know what backend language you are using, but I'll illustrate this approach using PHP because I'm lazy.
Lets assume you have an array of input names that you want to loop over and create columns for each.
<div class="row">
<? foreach ($inputs as $count => $name) : ?>
<div class="col-md-4">
<input type="text" name="<?=$name?>">
</div>
<? if (($count + 1) % 3 == 0) : // $count is 0 based. We need an index that starts at 1 so that we don't trigger a new row on the first loop (0 / 3 = 0 which is a remainder of 0) ?>
</div>
<div class="row">
<? endif; ?>
<? endforeach; ?>
</div>
The other solutions is a CSS based one. Pretty simple but is CSS3 only, so it won't work in IE 8 or less. This approach just clears the float after every third column. Demo here: http://jsfiddle.net/j0dtng4t/
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
[class*="col-"]:nth-of-type(3n + 1) {
clear:left;
}
Actually there are at least other 2 alternative solutions you can consider without adding row divs.
The first is adding heights to all the .col* elements , in this way they'll get ordered progressively and stack when they don't fit next to each other.(checkout the pen).
The second is using display flex on the div containing the .col* elements; it's not a bootstrap feature but it seems to suite your situation quite well.
In the pens I made I modified the col-* selectors but I suggest you use a new selector so not to mess with Bootstrap's grid style.
There seems to be some confusion on how floats work especially in a bootstrap grid.
Here is a simple bit of code that demonstrates how floats work
.container-fluid {min-width:638px;}
.container-fluid p{margin:0;font-size:1.2rem}
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
column 1 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 2 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 3 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-4">
column 2 <p>I'm tall, but my buddies aren't</p>
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-6">
column 2 <p>I'm tall but because Fred is too wide he goes to the far left to fit</p>
</div>
<div class="col-xs-2">
column 3
</div>
<div class="col-xs-4">
Fred column 1
</div>
</div>
<div class="row">
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
selects are smaller
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<select><option>i'm shorter</option></select>
</div>
<div class="col-xs-4">that's why i'm column 3</div>
</div>
</div>