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>
Related
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.
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]
I have three divs as described in the image...i want to change the location of divs as they go responsive...
Is it possible to do so? and how?
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
By using the Bootstrap defaults you would like to push and pull columns by simply adding some additional classes to them.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-xs-6 text-center"><h3 class="border">Div-1</h3></div>
<div class="col-sm-4 col-xs-6 col-sm-push-4 text-center"><h3 class="border">Div-3</h3></div>
<div class="col-sm-4 col-xs-12 col-sm-pull-4 text-center"><h3 class="border">Div-2</h3></div>
</div>
The point is to move the 3rd col to swap places with the 2nd col, since the 2nd will be at the bottom when it goes down to mobile. Using .col-sm-pull and .col-sm-push will grant you the ability to move columns around easily without breaking anything with unnecessary float styling or anything else.
Refer to Bootstrap's official guide to column ordering.
<div class="container-fluid">
<div class="row">
<div class="first col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="second col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="third col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
#media only screen and (max-width:990px) and (min-width:320px){
.first, .third{
float:left;
width:48%;
}
.second {
width:100%;
float:right;
display:block;
clear:both;
}
}
This works,
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-1</h3></div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center "><h3 class="border">Div-2</h3></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 text-center "><h3 class="border">Div-3</h3></div>
</div>
</div>
You could use http://www.w3schools.com/cssref/sel_nth-child.asp if your element hasn´t any unique id or class.
and
float: right;
As long as
#media only screen and (max-width: 990px) and (min-width:320px)
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-1</h3>
</div>
<div class="hidden-sm hidden-xs col-md-4 col-lg-4 text-center">
<h3 class="border">Div-2</h3>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 text-center">
<h3 class="border">Div-3</h3>
</div>
<div class="hidden-lg hidden-md col-xs-12 col-sm-12 visible-sm-block visible-xs-block text-center">
<h3 class="border">Div-2</h3>
</div>
</div>
</div>
http://getbootstrap.com/css/#responsive-utilities
I'm using Bootstrap right now and i'm having an issue.
This is my code:
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>
My layouts look like this:
But when my calendar height is bigger, this is what happens:
What can I do to fix it?.
I have fixed it! :)
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
CALENDAR
</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">
SECTION 1
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
PICTURES
</div>
<div class="clearfix visible-lg-block"></div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">
SECTION 2
</div>
Just putting clearfix class where before the layout that is moved worked!
Thanks for the answers!!.
I can't vote up your comments because I don't have enough reputation :(.
Using containers and rows as the Bootstrap team intended, it's easy to keep things aligned:
<div class="container-fluid">
<div class="row">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Calendar
<br>Calendar</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">Section One</div>
</div>
<div class="row">
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Section Two</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">Section Three</div>
</div>
</div>
Demo
You should use a wrapper around your calendar and make it .col-md-6 and then another around your second section and add the .col-md-6 class also. Like this, you would make sure that both your section will always talke half the screen. (You can also use other classes sm, xs and etc depeding on the layout you want to have)
For example:
<div class="col-md-6">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
</div>
<div class="col-md-6">
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
</div>
This way, you'd have to review also for example your seccion and calendar, because now the whol col-md-6 will contains 12 columns also. Hope it helped. You might want to review the Grid system in there also:
http://getbootstrap.com/css/#grid
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>