Can't figure out why the columns aren't being structured with this HTML:

<div> <div> <div> <div> <a href="">About</a> </div> <div> <img src="image.png"> </div> <div> <a href="#myModal1">SHARE</a> </div> </div> </div>
</div>

7

6 Answers

Try this:

DEMO

<div> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class --> <div> <div> <a href="#">About</a> </div> <div> <img src="image.png" /> </div> <div> <a href="#myModal1">SHARE</a> </div> </div> </div>

0

<div> <div> <div> <div> <div> <a href="">About</a> </div> <div> <img src="image.png"> </div> <div> <a href="#myModal1">SHARE</a> </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> <div> <div> <a href="">About</a> </div> <div> <img src="image.png"> </div> <div> <a href="#myModal1">SHARE</a> </div> </div>
</div>

7

Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :

Here is the Code:

<div> <div> <div> <div> <div> <a href="">About</a> </div> <div> <img src="" width="100px" /> </div> <div> <a href="#myModal1">SHARE</a> </div> </div> </div> </div> </div>

---

Refer the Bootstrap example description for the same:

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:

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

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 or include boostrap in an alternative way.

Make sure that you have linked the CDN link.

//Latest version v5

 <div> // This line is optional. <div> // Start from here. <a href="">About</a> </div> 

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy