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 -->
Related
I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
</div>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
Most grid layout examples in Bootstrap 4 put columns inside rows. Is it wrong to put rows inside columns ? Like this,
<div class="col col-md-6">
<div class="row">
</div>
</div>
Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<!-- Your content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's a perfectly valid approach. Consider the example below:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
The [x]-col-[y] classes are all percentage based for widths. Go nuts with the nesting! Just make sure you wrap them in a row div else you'll get some funky margins
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>
Can't figure out why the columns aren't being structured with this HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
Try this:
DEMO
<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="image.png" />
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
</div>
You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.
A simpler way would be
<div class="container">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :
Here is the Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"> About
</div>
<div class="col-md-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
</div>
<div class="col-md-4"> SHARE
</div>
</div>
</div>
</div>
</div>
Refer the Bootstrap example description for the same:
http://getbootstrap.com/css/
Nesting columns
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
Here is the working Fiddle of your code: http://jsfiddle.net/52j6avkb/1/embedded/result/
While this does not address the OP's question, I had trouble with my bootstrap rows / columns while trying to use them in conjunction with Kendo ListView (even with the bootstrap-kendo css).
Adding the following css fixed the problem for me:
#myListView.k-widget, #catalog-items.k-widget * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Have you checked that those classes are present in the CSS?
Are you using twitter-bootstrap-rails gem?
It still uses Bootstrap 2.X version and those are Bootstrap 3.X classes. The CSS grid changed since.
You can switch to the bootstrap3 branch of the gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3 or include boostrap in an alternative way.
Make sure that you have linked the CDN link.
//Latest version v5
<div class="col-md-12"> // This line is optional.
<div class="col-md-4"> // Start from here.
About
</div>
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>