Got a headache with complex spanning grid using bootstrap.
There are portrait and landscape blocs into 5 columns but they all have the same surface except the bloc number 1 that only got the same width.
It become complex when two portrait blocs shares the same row. Moving content with margin, is not suitable.
here you go: this is the fiddle Demo
<div class="row-fluid">
<div class="span4">
<div class="well">1<br/><br/><br/><br/><br/></div>
<div class="well">5</div>
</div>
<div class="span8">
<div class="span12"><div class="well">2</div></div>
<div class="row-fluid">
<div class="span8">
<div class="well">3</div>
<div class="well">6</div>
</div>
<div class="span4"><div class="well">4<br/><br/><br/><br/><br/></div></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well">7<br/><br/><br/><br/><br/></div>
<div class="well">14<br/><br/><br/><br/><br/></div>
</div>
<div class="span10">
<div class="row-fluid">
<div class="span6">
<div class="well">8</div>
</div>
<div class="span6">
<div class="well">9</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<div class="well">
10<br/><br/><br/><br/><br/>
</div>
</div>
<div class="span6">
<div class="well">11</div>
<div class="well">12</div>
</div>
<div class="span3">
<div class="well">
13<br/><br/><br/><br/><br/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div class="well">15</div>
</div>
<div class="span6">
<div class="well">16</div>
</div>
</div>
</div>
</div>
you are not completely free on the panel sizes using span, if you want a more precise result you should use custom percentages on the div width.
Related
I am trying to generate the following layout in bootstrap 3 css but the side bar is always small and it does not properly scale up and there is issues in mobile mode how do I proceed. thanks in advance.
Note:
this is what I tried
<div style="display:table;height:100%;width:100vw">
<div style="display:table-row-group;height:100%;width:100vw">
<div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
<div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
<breadcrumbs path=prd.path ></breadcrumbs>
<div class="row" style="width: 100%;height:100%">
<div class="leftcol">
<div class="infotile" style="height: 25%;">
<infotile></infotile>
</div>
<div class="detail" style="height:31%">
<details></details>
</div>
<div>
<match></match>
</div>
</div>
<div class="rightcol" style="height:100%">
<div class="pricetile hidden-xs">
<pricechart></pricechart>
</div>
<div class="rightbottomcol" style="height:51%">
<div class="rev">
<div class="title">
<tile></tile>
</div>
</div>
<div class="rev" style="height: 100%;">
<pd></pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to use Bootstrap Grid and Panel for Same Layout instead of Creating own CSS layout. Refer Link : https://getbootstrap.com/examples/grid/ and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
This is what your code should look like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></div>
</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>
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
I want to create a 2 column image grid similar to this example.
I'm looking for suggestions on how to best achieve this using the Twitter Bootstrap grid? I've attempted to do this with not much success. My main issues were the gutter between images being uneven, not being able to align the images on the center line of the page, and how to handle both portrait and landscape images. Thanks in advance.
Edit: As recommend I have supplied an example with a screenshot of the result.
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span8"><img src="http://goo.gl/mrllo"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span8"><img src="http://goo.gl/mrllo"></div>
</div>
</div>
</div>
</div>
The first row of span4's are perfectly aligned however, the bottom of the span4's in the second two rows are not aligning to the bottom of the span8 as the image illustrates.
Ok seems as if reading up upon nesting columns in bootstrap will help you on this one, what you are trying to achieve is relatively straight forward, just takes time to figure it out
http://twitter.github.com/bootstrap/scaffolding.html#responsive
I have tried this and it works, though you just need to put the appropriate images in their place as they are all different sizes
<div class="container">
<div class="row">
<div class="span8">
<img src="http://example">
</div>
<div class="span4">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span6">
<img src="http://example">
</div>
<div class="row">
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span9">
<img src="http://example">
</div>
<div class="span3">
<img src="http://example">
</div>
<div class="row">
<div class="span3">
<img src="http://example">
</div>
</div><!--row-->
</div><!--row-->
</div><!--container-->