Pyramid grid in bootstrap - html

I was using Bootstrap3 to make a 3 column grid. That looks like this:
However, see those rows with just two boxes, and one box. I was wanting to experiment to see how it would look centered if there are not 3 full boxes.
I accomplished this by adding display:flex; justify-content:center; to the .row class but it's not the true bootstrap way. I was wondering what would be the true bootstrap way.
Here is my code:
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
Thanks


Try this:
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
<div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
<div class="padd-80">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
....
</div>
</div>
</div>
Logic is simple, grid system of bootstrap consists of 12 columns.
If you have two divs, which are .col-lg-4, you should give col-lg-offset-2 to first div to make them centralised.
[2] [.col-lg-4] [.col-lg-4] [2]
For second row, I gave col-lg-offset-2 and col-md-offset-2 classes to first div.
For third row, I gave col-lg-offset-4 and col-md-offset-4 class to div.
[4] [.col-lg-4] [4]

Related

Image grid rows html and css

everyone, I'm trying to add a grid of products to my website with description. something Grid View like this? How would I do it? Any help?

You can use the bootstrap Grid System.
<div class="fluid-container">
<div class="row">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>
<div class="row">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class"col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>
</div>
Quick Bootstrap CDN

Have you linked bootstrap to your project?
if you do they have a good and easy to use grid system.
bootstrap grid system
<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>

how to fix bootstrap column align

Hello I have website called: http://mtisambebi.ge/
There is module where I have boostrap cols, but one col is aligned left and I do not understand whay.
this is screenshot
also module is called: ბოლო სიახლეები in main page.

Please add <div class="clearfix"></div> after every 3 column. where getting flot right
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="clearfix"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>

Bootstrap row dissapearing

I have a form that contains several rows, but one of them is disappearing.
The source code looks like this:
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
As far as I can tell this code looks fine, but this is what it turns into when it gets displayed.
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
This makes thing1 and thing2 appear together and not on their own row, and I have no idea why.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>Row that disappears.</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
Last Row
</div>
</div>
The code doesn't seem to have any problem #Trevor. I just implemented it and it works well according to me. Let me know if i have misinterpreted your problem.

This code works fine. please check your css file or bootstrap library.
please use bootstrap cdn link.

Turns out my issue was not bootstrap at all. Thanks everyone for mentioning you can't reproduce it, made me dig deeper. The issue turns out to be what was in the div. It was an angular select element with a self closing tag. Changing it to a normal closing tag fixed everything. I excluded it because I thought it was not important and didn't verify before posting.

center-block and margin:0 auto is not working

i have problem with this code the problem is i can't center the last block
when it come down after resize the page
i tried also with margin:0 auto but it;s not working with me here
the code which i tried with :
<div class="container">
<div class="row">
<div style="background:blue"class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
3
</div>
<div style="background:black" class=" col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
2
</div>
<div style="background:red;" class=" center-block col-sm-4 col-xs-6 col-md-4 col-lg-4 ">
1
</div>
</div>
</div>
and from jsfiddle

To center last column use xs-offset-3
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-warning">3</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 alert-danger">2</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-md-4 col-lg-4 alert-info">1</div>
</div>
</div>
And add col-xs-offset.css to support on Bootstrap 3 offsets on XS sizes
or see result on jsFIddle

bootstrap well goes on multiple lines on small screen

In my development environment I upgraded to rails 4.1.0 and removed some old bootstrap pieces. Now, the bootstrap Wells on my homepage are no longer working on mobile width screens.
Here is my last commit that is currently not applied to production yet. https://github.com/kacole2/JumpSquares/commit/afbcfbecdb3dc785dc6cb8469fadd2452464cef1
If you go to the production site at http://www.jumpsquares.net and shrink the width, it works as it should. However, when I'm running in development it looks messed up as seen here:
the only code that was changes in the github link was removing some leftover bootstrap stuff and changing the home screen banner.
Here is the code that should be applied
<div class="page-header">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#JohnnieITatDell: "JumpSquares is freakishly brilliant."
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#herseyc: "Fantastic home lab bookmark tool" (<font color="#18bc9c">blog post</font>)
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#vNelsonTX: "Really digging JumpSquares, great job!"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#h0bbel: "We discussed JumpSquares on <font color="#18bc9c">vSoup</font> today. I think you should listen to it" (31:30)
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#mikedent13: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
</div>
</div>
</div>
</div>

I was able to fix this by adding an additional row to each of the wells
<div class="page-header">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/johnnie1.png"), "https://twitter.com/JohnnieITatDell" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#JohnnieITatDell: "JumpSquares is freakishly brilliant."
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/herseyc.png"), "https://twitter.com/herseyc" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#herseyc: "Fantastic home lab bookmark tool" (<font color="#18bc9c">blog post</font>)
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<%=link_to image_tag("twitter-avatars/vnelson.png"), "https://twitter.com/vNelsonTX" %>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
#vNelsonTX: "Really digging JumpSquares, great job!"
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/h0bbel.png"), "https://twitter.com/h0bbel" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#h0bbel: "We discussed JumpSquares on <font color="#18bc9c">vSoup</font> today. I think you should listen to it" (31:30)
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 well well-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<%=link_to image_tag("twitter-avatars/mdent.png"), "https://twitter.com/mikedent13" %>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
#mikedent13: "You’ve changed the way I manage my bookmarks with JumpSquares. Just flat out awesome!"
</div>
</div>
</div>
</div>
</div>