Can someone please give me a simple example of html and css that I need to have to create something like this picture using bootstrap?
website template like this image
I searched the web but cannot find a simple example!
(for bootstrap v3.3.7 in asp.net mvc project)
Here is a code for You, enjoy!
<div class="row">
HEADER
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
FOOTER
</div>
This is the complete and corrected answer:
<div class="row">
<div class="col-md-4"> HEADER </div>
</div>
<div class="row">
<div class="col-md-4">
SIDEBAR
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
</div>
<div class="col-md-12">
content2
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"> FOOTER </div>
</div>
Related
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
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>
I have read some bootstrap grid system documents, but no answer can solve my question.
I want my html layout like the picture below, is there any way to do this by using Bootstrap grid system.
yes it is possible and very easy
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-xs-12">
both 1 and 3
</div>
</div>
<div class="col-md-4 col-xs-12">
both 2 nd 4 grid
</div>
</div>
here is the code for it :
<div class="container">
<div class="row">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="row">
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
check fiddle resize the window:https://jsfiddle.net/uL8jsxt2/
you have to follow the bootstrap rules, the grid system was designed for flexibility...many of the answers to layout issues is "nesting"
<div class="container">
<div class="row">
<div class="col-sm-9">
</div>
<div class="col-sm-3">
</div>
</div><!--repeat row-->
</div><!-- /container -->
I am trying to get the image and content side by side in the layout. Something like the way they have done it here. I have tried the bootstrap grid layout for doing it but I am just not getting it right plus it is not responsive.Can someone please help me out with this.
Here is the skeleton of the code:
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
//image here
</div>
<div class="col-md-8">
//text here
</div>
Hope this helps!
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