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>
Related
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>
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 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
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
I never have had a problem with the bootstrap grid until recently. The problem that I am having is with the medium breakpoint. On xs I have 2 columns, on small I have 3 columns, on medium I want 4 columns but this is broken and on large I have 6 columns. I am ending up with a row of 4 and then a row of 2, and so on and so forth.
xs: 6*6 = 36
sm: 4*6 = 24
md: 3*6 = 18 <- 18 is obviously why its causing the problem
lg: 2*6 = 12
For some reason I cannot think of a solution to this problem. The example can be seen at http://dev.charliegrove.com/kingdom
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
Any advice greatly appreciated as I always use bootstrap and figure there must be something I am missing here to accomplish this!!? Thank you
I show your demo code and you have code like this:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
Now here the problem is, in each <div class="row"></div> you have 6 other divs, an you have repeated this format. So when the child divs set in the row, its break down to the new line for the next <div class="row"></div>. So in the col-md-3 class it will break down in the set of 4 and 2.
To avoid this problem you can set all your child divs in the single <div class="row"></div> like this :
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
I see two simple options... either skip the md-3 columns (i.e. go straight from sm-4 to lg-2), or as #tejashoni suggested, put all your squares in a single div class="row"