CSS div position for magazine-like theme - html

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

Related

Merge columns in Bootstrap vertically

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>

Is there any way to make the image clickable, to get redirected to other asp.net page?

How can I make the image clickable so I can be redirected to other asp net page?
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>

just wrap image into anchor tag
<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>
</div>

<div class="banner-section spad">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5">
<div class="single-banner">
<img src="img/banner-1.jpg">
<div class="inner-text">
<h4>Homem</h4>
</div>
</div>
</div>
</div>

how to generate the following layout in bootstrap 3 css

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 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>