Bootstrap Col class not working correctly

Question

Please have a look at

.colName {
             text-align: center;
         }

         .calbox {
             border: 1px solid #999;
             padding: 5px;
             min-height: 40px;
         }   

        .Box1 {
            padding: 5px !important;
            margin: 1px 2px 0px;
            border: 1px solid #aaa4a4 !important;
            font-size: .95em;
            line-height: 1.3;
            border-radius: 3px;
            font-weight: normal;
            color: #000 !important;
        }

        .Box1_a {
            cursor: pointer !important;
            text-decoration: none !important;
            color: #000 !important;
        }

<script src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <div class="row-fluid">
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 1</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 2</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox" style="height:200px;">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 3</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 4</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 5</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Why Name 3 section didn't start just below Name 1, why there is space (i think because of extra height in Name 2).

Can you please guide me how to show Name 3 just after Name 1. Well Let me clear 1 thing, name would be name 100, so can't put negative margin to name 3 or any other because it is all dynamic.

I am also attaching the screenshot of html result.

you are following `row` approach, this is how it has to behave. for your desired scenario use `column` approach — Deepak Yadav, Jun 15 '17 at 12:34

score 2 · Answer 1 · answered Jun 15 '17 at 13:02

2

Hi you are facing this problem because of uneven height of siblings.

Here I used masonry for output exactly you want: https://codepen.io/ShubhamAshish/pen/rrzRmo

$('.row-fluid').masonry({
    itemSelector: '.col-xs-6.col-md-3',
});

answered Jun 15 '17 at 13:02

Shubham

285
2
15

hmmm seems like it will work :) let me put in my code ! – user2972061 Jun 15 '17 at 13:03
Looks good, +1, and don't forget to mention that one need to add the Masonry library – Asons Jun 15 '17 at 13:09
Yup :) Thanks @LGSon for guidence. I added the things in codepen. So, if someone download the pen he/she can get all the stuff. :) – Shubham Jun 15 '17 at 13:14
@Shubham well it works with my given HTML :) but it is not working in project, because it is conflict with other jqueries :( .. is there any other option special with CSS or HTML. Thanks for your great response! – user2972061 Jun 15 '17 at 13:25
If you are already using jquery, then you need to add only https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js – Shubham Jun 15 '17 at 13:37

Asons · Answer 2 · 2017-06-15T13:05:35.023

If you are able to do a markup change, place them columns wise, the odd numbered in 1 column, and the even in another.

.colName {
             text-align: center;
         }

         .calbox {
             border: 1px solid #999;
             padding: 5px;
             min-height: 40px;
         }   

        .Box1 {
            padding: 5px !important;
            margin: 1px 2px 0px;
            border: 1px solid #aaa4a4 !important;
            font-size: .95em;
            line-height: 1.3;
            border-radius: 3px;
            font-weight: normal;
            color: #000 !important;
        }

        .Box1_a {
            cursor: pointer !important;
            text-decoration: none !important;
            color: #000 !important;
        }

<script src="https://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <div class="row-fluid">
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 1</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 3</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 5</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 2</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox" style="height:200px;">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 colName"><b>Name 4</b></div>
                    <div class="col-xs-12 colFS Mon">
                        28th Nov
                        <div class="calbox">28</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        29th Nov
                        <div class="calbox">29</div>
                    </div>
                    <div class="col-xs-12 colFS Mon">
                        30th Nov
                        <div class="calbox">30</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

wow , I didn't read your full reply, just click on run and you resolve my problem, Thanks, and now let me read it :D — user2972061, Jun 15 '17 at 12:56
Oh no no, you change all the html :) well i edit the question, it all generated dynamically, with the HTML pattern same for all names. — user2972061, Jun 15 '17 at 13:00
@user2972061 Updated my answer to _If you are able to do a markup change,..._. Now it at least will be a viable option for you, or anyone else, who can make that change :) — Asons, Jun 15 '17 at 13:07

score 0 · Answer 3 · answered Jun 15 '17 at 12:53

Well you can not have the desired results with bootstrap natively. You will need to use jquery lib for this or alter the HTML layout to trick the grid system.

When you use bootstrap, it gives the columns a property of float. Float will align the elements horizontally and name 3 will never float up to cover the white space.

jQuery way: You can use https://isotope.metafizzy.co/layout-modes/packery.html

HTML way: The other way of doing this would be have a different HTML layout. Something like this:

<div class="cont">
  <div class="col1 col-xs-6">
   <div class="name1 col-xs-12 col-md-6"></div>
   <div class="name3 col-xs-12 col-md-6"></div>
  </div>
  <div class="col2 col-xs-6">
   <div class="name2 col-xs-12 col-md-6"></div>
   <div class="name4 col-xs-12 col-md-6"></div>
</div>

I wont recommend this type of html layout because if you change the height of any name block, then you will have to alter the HTML again.

I hope this helps.

Bootstrap Col class not working correctly

3 Answers3