Bootstrap Columns Not Working

Question

Can t figure out why the columns aren t being structured with this HTML    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-12  gt               lt div class  col-md-4  gt                     lt a href    gt About lt  a gt               lt  div gt               lt div class  col-md-4  gt                   lt img src  image png  gt               lt  div gt               lt div class  col-md-4  gt                    lt a href   myModal1  data-toggle  modal  gt SHARE lt  a gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

Your Nesting DIV structure was missing  you must add another  quot  row quot  div when creating nested divs in bootstrap   Here is the Code   lt div class  quot container quot  gt      lt div class  quot row quot  gt               lt div class  quot col-md-12 quot  gt                   lt div class  quot row quot  gt                       lt div class  quot col-md-4 quot  gt   lt a href  quot  quot  gt About lt  a gt                            lt  div gt                       lt div class  quot col-md-4 quot  gt                           lt img src  quot https   www google ca images srpr logo11w png quot  width  quot 100px quot    gt                       lt  div gt                       lt div class  quot col-md-4 quot  gt   lt a href  quot  myModal1 quot  data-toggle  quot modal quot  gt SHARE lt  a gt                            lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt    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

User · Answer

lt div class  container  gt       lt div class  row  gt           lt div class  col-md-12  gt               lt div class  row  gt                   lt div class  col-md-4  gt                         lt a href    gt About lt  a gt                   lt  div gt                   lt div class  col-md-4  gt                       lt img src  image png  gt                   lt  div gt                   lt div class  col-md-4  gt                        lt a href   myModal1  data-toggle  modal  gt SHARE lt  a gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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   lt div class  container  gt      lt div class  row  gt          lt div class  col-md-4  gt               lt a href    gt About lt  a gt          lt  div gt          lt div class  col-md-4  gt             lt img src  image png  gt          lt  div gt          lt div class  col-md-4  gt               lt a href   myModal1  data-toggle  modal  gt SHARE lt  a gt          lt  div gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

Try this   DEMO   lt div class  container-fluid  gt   lt  -- If Needed Left and Right Padding in  md  and  lg  screen means use container class -- gt               lt div class  row  gt                   lt div class  col-xs-4 col-sm-4 col-md-4 col-lg-4  gt                       lt a href     gt About lt  a gt                   lt  div gt                   lt div class  col-xs-4 col-sm-4 col-md-4 col-lg-4  gt                       lt img src  image png    gt                   lt  div gt                   lt div class  col-xs-4 col-sm-4 col-md-4 col-lg-4  gt                       lt a href   myModal1  data-toggle  modal  gt SHARE lt  a gt                   lt  div gt               lt  div gt           lt  div gt

[html] Bootstrap Columns Not Working

Examples related to html

Examples related to css

Examples related to twitter-bootstrap