CSS how to set div height the same using bootstrap 3 col-md-4

Question

I have a display that allows users to see selected icons with their own description.

I am using bootstrap 3.4 with the col-md-4 so that each icon is displayed 3 per line (with a total of 9 icons and their descriptions).

The description can be up to 40 chars in length and this can make the div that displays each icon a differing height as the description can wrap over 3 lines (as shown below).

This is the issue that I currently have:

This is what I am attempting to get, even if the text description is of differing lengths:

I have not used tables approach, because the user can enter only two icons, say the 1st icon and the last icon, so they must appear next to each other.

I have tried adding a height of 200px to the CSS class visual_preview_standard and although this does work, this approach makes the div of each icon too high, especially if the user only enters a small description that does not wrap over two or more lines. There is too much un-necessary white space.

I have searched SO and read this post and this post (among many others), but the solutions I tried in each post made all the icons appear next to each other on the one line, instead of 3 icons per line.

Any suggestions would be appreciated.

Here is my HTML code:

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: indianred;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 1" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: wheat;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 2 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: gold;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 3" %}</b>
        </div>
    </div>


    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aqua;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 4 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: orange;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 5" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: lime;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 6" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: yellow;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 7 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aliceblue;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 8" %}</b>
        </div>
    </div>

    <div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: pink;">
        <div class="row">
            <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
        </div>
        <div class="row">
            <b>{% trans "Test 9 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
        </div>
    </div>

Here is my CSS code:

.visual_preview_standard {
    overflow: hidden;
    text-align: center
}

.padding-bottom-10 {
    padding-bottom: 10px
}

score 1 · Answer 1 · answered Feb 14 '16 at 04:19

1

Sizes of divs are not set by default in bootstrap , when you write css overflow:hidden , its works when height or width is specified , check for height of divs and set to you required size and then set overflow property . Hope it will help

answered Feb 14 '16 at 04:19

Ganesh K

639
10
18

NooBskie · Answer 2 · 2016-02-14T04:25:58.267

0

There is multiple ways to accomplish this one is to wrap your columns with a row and add negative margin to it

.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}

Here is a Codepen *Edit: Updated

edited Feb 14 '16 at 04:25

answered Feb 14 '16 at 04:20

NooBskie

3,761
31
51

thanks, but I cannot use your solution as you have wrapped each 3 divs in its own row. If the user only selected to display the 1st div and last div, the the two selected divs would not be next to each other - your code places them on separate rows / lines. – user1261774 Feb 14 '16 at 05:12
1

@user1261774 I don't think you will find an answer except this one if you are not using js – Daniel Cheung Feb 14 '16 at 10:09

score 0 · Answer 3 · answered Feb 14 '16 at 05:54

you can setup the identified in your main div, the div which have bootstrap's class like this:

<div class="myicons"> 
<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: indianred;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 1" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: wheat;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 2 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: gold;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 3" %}</b>
    </div>
</div>


<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aqua;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 4 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: orange;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 5" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: lime;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 6" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: yellow;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 7 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: aliceblue;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 8" %}</b>
    </div>
</div>

<div class="col-md-4 padding-bottom-10 visual_preview_standard" dir="ltr" style="direction: ltr; background-color: pink;">
    <div class="row">
        <icon class="fa fa-star" style="font-size: 50px; vertical-align: middle;"></icon>
    </div>
    <div class="row">
        <b>{% trans "Test 9 WWWW WWWW WWWW WWWW WWWW WWWWWW WWWW" %}</b>
    </div>
</div>

and the css style will be:

.myicons .visual_preview_standard {
     height: 300px;

}

thanks, but adding a set height to the row places too much white space in the divs when the description is short and not wrapped over more than 1 line as stated in the OP. — user1261774, Feb 14 '16 at 06:12
actually you are using background colors as style on class="col-md-4 padding-bottom-10 visual_preview_standard" div and it can't be that if we are increasing height of those div and those div which have short description showing white area. If possible share a link and i'll give you a proper styling code which will helps to show properly. — Harry, Feb 14 '16 at 14:24

score 0 · Answer 4 · answered Feb 14 '16 at 06:13

0

Create an outer div and wrap various divs in it..

and remember to fix the positions.. and make changes to your css accordingly

answered Feb 14 '16 at 06:13

Technology Mash

1
1

I have tried your approach, and it does not work. Any other suggestions? – user1261774 Feb 14 '16 at 06:19

score 0 · Answer 5 · answered Feb 14 '16 at 06:26

0

you can try this approach { position: absolute; white-space: nowrap; overflow: hidden; }

answered Feb 14 '16 at 06:26

Technology Mash

1
1

Assuming I add these values to the CSS class `visual_preview_standard` this will simply hide the overflow. – user1261774 Feb 14 '16 at 06:34

CSS how to set div height the same using bootstrap 3 col-md-4

5 Answers5