I'm trying to figure out how to keep all of the rows the same height. The problem I run into is that when they have no content they shrink down to just the padding height.
The full example can be found here: https://jsfiddle.net/c85ajj9a/
Code snippet:
<div class="col-md-12">
<div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 1:</div>
<div class="col-md-1 detail-box">Maria</div>
<div class="col-md-1 detail-box">Smith</div>
<div class="col-md-2 detail-box">699, 685, 675</div>
<div class="col-md-1 detail-box">$6,500.00</div>
<div class="col-md-2 detail-box email-text">maria.smith#gmail.com</div>
<div class="col-md-2 detail-box">714-555-5555</div>
<div class="col-md-2 detail-box">626-555-5555</div>
</div>
<div class="col-md-12">
<div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 2:</div>
<div class="col-md-1 detail-box"></div>
<div class="col-md-1 detail-box"></div>
<div class="col-md-2 detail-box"></div>
<div class="col-md-1 detail-box"></div>
<div class="col-md-2 detail-box email-text"></div>
<div class="col-md-2 detail-box"></div>
<div class="col-md-2 detail-box"></div>
</div>
a min-height will add the height to the rows even if there is no content.
.detail-box {
padding: 5px;
overflow: auto;
border: 1px solid #000000;
text-align: center;
font-size:18px;
color:black;
min-height:18px;
}
Related
I'm trying to create a Grid of Tiles with Bootstrap with the following properties:
all tiles should be squares
horizontal and vertical gaps should be the same (even the same compared on different screen-widths)
the tiles should always be centered in the middle of the screen(distance from the left edge of website to the left border of the leftmost tile = distance from the right edge of the website to the right border of the righmost tile)
It should look like this:
body{
background: #a5b5c5;
background:lightblue !important;
}
.box{
height: 180px;
width: 180px;
background: #fff;
border-radius: 4px;
}
.col-lg-2, .col-md-3, .col-xs-6{
margin-top: 12px !important;
}
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
</div>
</div>
What should I do to accomplish a responsiveness which sustains my properties?
Thanks!!
You didn't mention specific box dimensions, only that they should remain square. In that case, use margin-top:30px to corresponding with the Bootstrap gutter width, and padding-bottom: 100%; on the box.
.box {
background: #fff;
border-radius: 4px;
padding-bottom: 100%;
}
.col-lg-2, .col-md-3, .col-xs-6{
margin-top: 30px !important;
}
Bootstrap 3 demo
Bootstrap 4 demo
Note: Setting a px size on the .box (ie:width:180px;height:180px) will prevent the boxes from resizing responsively.
You can increase the gutter by changing margins and padding. Margin is double the padding for example...
.col-lg-2, .col-md-3, .col-xs-6{
padding-left: 30px;
padding-right: 30px;
margin-top: 60px;
}
try below code
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
<div class="col-xs-3 col-sm-4 col-md-2">
<div class="box"></div>
</div>
</div>
</div>
body{
background: lightblue;
}
.container{
margin-top: 20px;
}
.box{
height: 100px;
background: #fff;
border-radius: 5px;
margin-bottom: 10px;
max-width: 100px;
}
I have this HTML:
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
And CSS:
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0px;
}
I'm also using bootsrap (version 3).
I was able to remove margin between rows, but can't remove margin between columns. Is there a way to force it somehow?
I need all "squares" next to each other without any margins (both between rows and columns).
You can see how it looks here: https://jsfiddle.net/a91zujkj/
If you really want to use col- class, make sure to set the .thumbnail elements width to 100% and use a no-padding class on the col- elements.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.box {
width: 300px;
padding-top: 100px;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
.thumbnail {
width: 100%;
height: 100px;
margin: 0;
}
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 no-padding">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
You actually do not need to use col- classes at all and floats are not needed either. Another way to do this is using display: inline-block.
Here is how that looks:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.wrapper {
width: 300px;
padding-top: 100px;
margin: 0 auto;
font-size: 0;
}
.item {
border: 1px solid #eee;
width: 100px;
height: 100px;
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
And if you're really brave you could also use CSS Grid layout. ;)
CSS Grid Layout
CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here is how that goes:
.wrapper {
padding-top: 100px;
width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
}
.item {
border: 1px solid #ddd;
height: 100px;
width: 100px;
}
<div class="wrapper">
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
<div class="item">A</div>
</div>
It's because .col-*-4 is wider than 100px, which is the width you've defined for the .thumbnail elements.
You can just remove the .col-* classes and use .pull-left instead.
.box {
width: 300px;
padding-top: 100px;
}
.row > div > div {
width: 100px;
height: 100px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
<div class="pull-left">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Remove padding-left and padding-right for .col classes and then change width: 100px; to width: 100%; for .row > div > div
.box {
width: 300px;
padding-top: 100px;
}
.padding-0{
padding-right:0 !important;
padding-left:0 !important;
}
.row > div > div {
width: 100%;
height: 100px;
margin: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="box center-block">
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
<div class="col-md-4 col-xs-4 padding-0">
<div class="thumbnail">A</div>
</div>
</div>
</div>
</div>
Row has it's own style and add margin to element, you can remove it by adding :
.box >.row{
margin:0;
}
I am trying to create a 3 by 3 black and white grid. But instead only black square is showing. I have tried using Bootstrap.
My one square of the grid should cover 3 grids space as per bootstrap grid system and I am using padding-top:100% to maintain the aspect ratio for the squares in the 3 by 3 grid.
body {
margin: 0;
color: pink;
}
.square {
width: 100%;
padding-top: 100%;
background-color: black;
}
.square-w {
width: 100%;
padding-top: 100%;
background-color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="square"></div>
</div>
<div class=" col-md-3 ">
<div class="square-w"></div>
</div>
<div class=" col-md-3 ">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="square"></div>
</div>
<div class="col-md-3 ">
<div class="square-w"></div>
</div>
<div class="col-md-3 ">
<div class="square"></div>
</div>
</div>
</div>
Your screen view might be too small.
Changing all the col-md-3 classes to col-sm-3 allows it to be shown on my view
JSFiddle: https://jsfiddle.net/2k5523ym/1/
You just need to put below code in css
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
and then assign nopadding class to every col-md-3 div
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class=" col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class=" col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
</div>
<div class="row">
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square-w"></div>
</div>
<div class="col-md-3 nopadding">
<div class="square"></div>
</div>
</div>
</div>
Hope this help you
I have created a jsFiddle. I want the border should be between both row lines but background color to like what its showing in js fiddle. How can I extend this column border line.
My Html
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
And Css
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top:0 ;
}
My Fiddle - https://jsfiddle.net/ff49tu79/13/
you may wanna use padding instead of margin in cells and use flex box to flex the div cells together
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top: 0;
}
.flx {
display: flex;
}
.inner {
background: aliceblue;
border-right: 1px solid blue;
padding: 10px 15px;
}
.inner-end {
background: aliceblue;
padding: 10px 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="flx">
<div class="col-md-3 col-xs-3 inner">
<span>Another tesing text</span>
<div>1</div>
<div>2</div>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
</div>
See JSFIDDLE
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
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! =]
with flex-box and adding a single css class:
<div class="row flexit">...</div>
.flexit {
display:flex;
}
.flexit > div {
flex:1;
}
codepen example