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>
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;
}
I created a column structure with bootstrap 4 . It looks something like this it has 1 row with 2 columns:
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-5 top">
</div>
<div class="col-lg-5 top">
/*Widget with too much margin right*/
</div>
</div>
</div>
</div>
The issue is that the widget on the right has too much empty space. The columns have an equal length (col-lg-5) but there is still a lot of space on the right. How can I remove this and keep the columns the same size?
link to codepen
You should only use columns within your rows, and the columns are based on a 12 column grid. You currently have 10 columns worth of width taken up using 2 .col-5 column and you also have a pixel for the divider that is stuck into the row in the codepen even though your example here doesn't show it.
How about doing two .col-6 columns and having the divider be a left border on the right column?
https://codepen.io/anon/pen/xaeWGB
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top">
</div>
<div class="col-lg-6 divider top">
</div>
</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 am using bootstrap and in my first row i have 2 side one contain picture and other div but image size is larger the left side div so my 2nd row div come after picture. but my requirement is make 2nd row div just below the first row div? Picture here
<div class="container"> // Container for two side contents
<div class ="row"> // single row
<div class ="Row1">
// Your's Row1 code goes here
</div>
<div class="Row2">
// Your's Row2 code goes here
</div>
</div>
</div>
<div class="container"> // Container for main contents(gallery and big image)
...
</div>
You should seperate the blocks like:
<div class="overall-container">
<div class="left-block" style="width: 30%;">
// add your navigation blocks here
</div>
<div class="right-block" style="width: 70%;">
//add page content here
</div>
</div>
Make Another Row in yours first row.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
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>