Bootstrap Columns Not Working - html

Question

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>

Answer 1

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>

Answer 2

<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>

Answer 3

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/

Answer 4

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;
}

Answer 5

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.

Answer 6

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>