Align height 3 divs in one row - bootstrap

Question

Align height 3 divs in one row - bootstrap

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have 3 divs in a row, but some have different heights depending on the content of the div.

How to standardize the height of the div. (I do not want to set height, but rather they are the same height.)

My html:

<div class="row-services-1">
    <div class="container">
        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div><!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600"alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">PINTURAS / TEXTURAS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Pinturas e Texturas
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600"alt="TELHADO" title="TELHADO">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">TELHADO</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de telhados
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600"alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Assentamentos de revestimentos
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px">
                </div>
            </div><!-- /.col-md-4 -->
        </div>

        <div class="row row-same-height">
            <div class="col-md-12">
                <div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div>
            </div>
        <!-- /.col-md-12 -->                                        

            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600"alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de adequação Hidráulica
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600"alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de alvenarias e concretagem
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->


            <div class="col-md-4 col-md-height">
                <div class="wprt-image-box has-shadow clearfix">
                    <div class="item">
                        <div class="inner">
                            <div class="thumb">
                                <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600"alt="Impermeabilização" title="Impermeabilização">
                            </div>
                            <div class="text-wrap">
                                <h3 class="title">
                                    <a href="#">Impermeabilização</a>
                                </h3>
                                <div class="desc">
                                    Confira todos nossos serviços de Impermeabilização
                                </div>
                                <div class="ib-btn">
                                    <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.wprt-image-box -->

                <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
            </div><!-- /.col-md-4 -->
        </div>                                   
    </div><!-- /.container -->
</div>

div bootstrap

asked by anonymous 03.10.2017 / 22:38

2 answers

2

I would say the simplest way and that for your case where the content is not dynamic would be to set a minimum height with min-height , like this:

.precos .col-md-4 {
    padding: 15px;
}
.item {
    min-height: 400px;
    border: 1px #ccc solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="precos row">
  <div class="col-md-4">
      <div class="item"></div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>

Using Flex

Under this link you can use the link that is an experiment, not implemented (< the href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css"> link ), should look like this:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  justify-content: space-around;
}

.row-eq-height [class*="col-xs-"] {
    width: 100%;
}

.item {
    height: 100%; /*acompanha a altura do pai*/
    border: 1px #ccc solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="precos row row-eq-height">
  <div class="col-md-4">
      <div class="item">
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
       foo<br>foo<br>foo<br>foo<br>foo<br>
      </div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
  <div class="col-md-4">
      <div class="item">.col-md-4</div>
  </div>
</div>

<script>
$(window).on("load resize", function(){
    div_inner = $(".wprt-image-box.has-shadow .item .inner");
    if(div_inner.eq(0).width() >= window.innerWidth/2){
        div_inner.css("height","auto");
    }else{
        max_height = 0; div_col = 3; contador = 1; loop = 1;
        div_inner.css("height","").each(function(){
            if($(this).height() > max_height){
                max_height = $(this).height();
            }
            if(contador == div_col){
                for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
                    div_inner.eq(x).css("height",max_height+"px");
                }
                max_height = 0; contador = 1; loop++;
            }else{
                contador++;
            }
        });
    }
});
</script>

The above script equals height of all div .item where you have the highest height on each line.

$(window).on("load resize", function(){
	div_inner = $(".wprt-image-box.has-shadow .item .inner");
	if(div_inner.eq(0).width() >= window.innerWidth/2){
		div_inner.css("height","auto");
	}else{
		max_height = 0; div_col = 3; contador = 1; loop = 1;
		div_inner.css("height","").each(function(){
			if($(this).height() > max_height){
				max_height = $(this).height();
			}
			if(contador == div_col){
				for(x=(div_col*loop)-div_col;x<div_col*loop;x++){
					div_inner.eq(x).css("height",max_height+"px");
				}
				max_height = 0; contador = 1; loop++;
			}else{
				contador++;
			}
		});
	}
});

.wprt-image-box.has-shadow { margin: 0 -15px; }
.wprt-image-box.has-shadow .item { padding: 0px 15px 30px; }
.wprt-image-box.has-shadow .item .inner { background-color: #fff; -webkit-box-shadow: 0px 5px 300px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.07); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row-services-1">
                    <div class="container">

                            <div class="row row-same-height">
                            	<div class="col-md-12">
                                	<div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px">
                                    </div>
								</div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/5-1506976704.jpg&amp;w=1920&amp;h=600"alt="PINTURAS / TEXTURAS" title="PINTURAS / TEXTURAS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">PINTURAS / TEXTURAS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Pinturas e Texturas                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/6-1506976743.jpg&amp;w=1920&amp;h=600"alt="TELHADO" title="TELHADO">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">TELHADO</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de telhados                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/4-1506976664.jpg&amp;w=1920&amp;h=600"alt="ASSENTAMENTO / REVESTIMENTOS" title="ASSENTAMENTO / REVESTIMENTOS">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ASSENTAMENTO / REVESTIMENTOS</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Assentamentos de revestimentos nossos serviços de Assentamentos de revestimentos                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div><div class="row row-same-height"><div class="col-md-12"><div class="wprt-spacer clearfix" data-desktop="70" data-mobi="60" data-smobi="60" style="height:70px"></div></div><!-- /.col-md-12 -->                                        

                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/2-1506976574.jpg&amp;w=1920&amp;h=600"alt="ADEQUAÇÃO HIDRÁULICA" title="ADEQUAÇÃO HIDRÁULICA">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ADEQUAÇÃO HIDRÁULICA</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de adequação Hidráulica                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/3-1506976625.jpg&amp;w=1920&amp;h=600"alt="ALVENARIAS / CONCRETAGEM" title="ALVENARIAS / CONCRETAGEM">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">ALVENARIAS / CONCRETAGEM</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                         Confira todos nossos serviços de alvenarias e concretagem                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->


                                                <div class="col-md-4 col-md-height">
                                                    <div class="wprt-image-box has-shadow clearfix">
                                                        <div class="item">
                                                            <div class="inner">
                                                                <div class="thumb">
                                                                    <img src="https://localhost/wc_marca/tim.php?src=uploads/images/2017/10/1-impermeabilizacao-1506976478.jpg&amp;w=1920&amp;h=600"alt="Impermeabilização" title="Impermeabilização">                                                                    </div>
                                                                <div class="text-wrap">
                                                                    <h3 class="title">
                                                                        <a href="#">Impermeabilização</a>
                                                                    </h3>
                                                                    <div class="desc">
                                                                        Confira todos nossos serviços de Impermeabilização                                                                        </div>
                                                                    <div class="ib-btn">
                                                                        <a class="small wprt-button outline" href="#">Conheça Mais...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div><!-- /.wprt-image-box -->

                                                    <div class="wprt-spacer clearfix" data-desktop="0" data-mobi="35" data-smobi="35" style="height:0px"></div>
                                                </div><!-- /.col-md-4 -->
                                                </div>                                   

                    </div><!-- /.container -->
                </div>

Align height 3 divs in one row - bootstrap

2 answers

Using Flex

Related