Twitter Bootstrap Question posted in

Same height in row? – Twitter bootstrap

How can I use the same height in row that keeps the site responsive? For example I have two x_panel with rows and columns inside but the height is different, i tried use display flex, but it change inside columns…

Here is a code to you understand what I’m trying to do:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
	<div class="col-md-6 col-sm-6 col-xs-12">
		<div class="x_panel tile">
			<div class="x_content">
				<div class="row x_title">
					<h3>Ponto de Venda:<small id="node_name"></small></h3>							
				</div>
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">	
						<div class="col-md-5 col-sm-5 col-xs-12">
							<h5>Período de Avaliação:</h5> 
						</div>
						<div class="col-md-7 col-sm-7 col-xs-12">
							<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
								<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
								<span id="grafico_medias"></span> <b class="caret"></b>
							</div>
						</div>
					</div>
				</div>
				<div class="row tile_count text-center">
					<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
						<span class="count_top"><i class="fa fa-user"></i> Total de Pedestres</span>
						 <div id="displayPedestres" class="count"></div>
					</div>
					<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
						<span class="count_top"><i class="fa fa-eye"></i> Visualizações</span>
						<div id="displayInteracoes" class="count"></div>
					</div>
					<div class="col-md-4 col-sm-12 col-xs-12 tile_stats_count">
						<span class="count_top"><i class="fa fa-refresh"></i> Taxa de Conversão</span>
						<div id="displayTaxa" class="count green"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Informacoes medias -->
  
	<!-- Meta -->
	<div class="col-md-6 col-sm-6 col-xs-12">
		<div class="x_panel tile">
			<div class="x_content">
				<div class="row x_title">
					<h3>Meta</h3>							
				</div>
				<div class="col-md-7 col-sm-12 col-xs-12">
					<div class="row">		
						<div class="col-md-3 col-sm-6 col-xs-6">											
							<h5>Meta do</h5>
						</div>									
						<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
							<select id="metaPeriodo" onchange="meta()" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc">
								<option>dia</option>
								<option>mês</option>
								<option>trimestre</option>
							</select>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-6 col-xs-6">	
							<h5>em</h5>
						</div>	
						<div class="col-md-9 col-sm-6 col-xs-6" style="text-align: right">
							<select  id="metaVariavel" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 100%; text-align: center; border: 1px solid #ccc" id="tipo_meta" onclick="meta()">
								<option>pedestres</option>
								<option>visualizações</option>
								<option>taxa de conversão</option>
							</select>
						</div>
					</div>
					<br>
					<div class="row">
						<div class="col-md-12 col-sm-12 col-xs-12">
                            <input id="metaInput" type="text" class="form-control has-feedback" placeholder="Insira aqui a meta" style="height: 68px; font-size: 40px; font-weight: 600; color: #73879C; text-align: center">
                        </div>
					</div>
				</div>
				<div class="col-md-5 col-sm-12 col-xs-12">
					<div class="row">
						<div class="sidebar-widget text-center">
							<h4 style="text-align: center;">Cumprimento da Meta</h4>
							<canvas width="140" height="80" id="foo" class="" style="width: 150px; height: 100px;"></canvas>
							<div class="goal-wrapper" style="text-align: center;">
								<span class="gauge-value pull-center"></span>
								<span id="gauge-text" class="gauge-value pull-center"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>					
	<!-- /Meta -->
</div>

I would like to “sync” this two columns with the same height doesn’t matter the size of screen, can you help me?

EDIT

fiddle: https://jsfiddle.net/5nzcpj3s/

I am using Bootstrap with gentelella layout

Tags:

2

Answers


  1. 0

    https://jsfiddle.net/frd28kk0

    I added new CSS classes just to make it easier to understand.

    You have to play with the margins to get it better.

    Your flexbox idea was fine. I guess you only missed setting .so-col-1 as display: flex; as well.

    Boa sorte! =]

    Login or Signup to reply.
  2. 0

    with flex-box and adding a single css class:

    <div class="row flexit">...</div>

    .flexit {
  display:flex;
}
.flexit > div {
  flex:1; 
}

    codepen example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search