Bootstrap v3 Thumbnail issues

Bootstrap v3 Thumbnail issues - css

I am upgrading to Bootstrap v3 and have encountered an issue with the thumbnails.
Here is my code:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
And here is what it produces:
As you can see, the left hand thumbnails are not inline with the content.

Bootstrap uses a 12-column grid. 3 * 6 > 12. If you want the columns to run next to each other, you'll need to use col-sm-4 (4 * 3 = 12):
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
Alternatively, if you want each thumbnail to occupy 6 columns, place them into two rows:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>

You are using the row class incorrectly. A row can contain a maximum of 12 columns. You are adding 3*6=18 columns to the same row.
Add another row.
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="row">
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>

Related

Bootstrap 4 grid not aligning

Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>

The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>

Bootstrap 3 row and col order on small screens

I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you

Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>

How can i solve my bootstrap grid?

I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?

You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/

Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.

Bootstrap Image Between Column

What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.

Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.

This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo

Bootstrap span4 dynamic content

I'm having trouble working with dynamic content which need to get span4 classes. Because a row can be max 12 columns so next 'article' need to jump to the next row.
Please check out this preview what I mean: http://www.dreamix-studio.com/bootstrap/bootstrap_q_2.jpg
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row-fluid">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>
Does anyone know how I can solve this problem?

try This
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>