I have been trying to build a table with Bootstrap 4 grid container. Everything looks great (styling, alignment,...) except for one problem: the table doesn't follow the grid container as expected. It seems like only the first column expands/shrinks when I try to resize my browser.
I used the display property to build my table to solve alignment problems, but once I try putting col-# as class names for the columns, it doesn't seem to work.
.my-table {
border: 1px solid grey;
display: table;
padding: 0;
}
.my-table-row-header {
display: table-header-group;
height: 50px;
}
.first-header-column {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.my-table-body {
display: table-row-group;
}
.my-table-row {
height: 50px;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
display: table-row;
}
.row-cell {
display: table-cell;
vertical-align: middle;
border-right: 1px solid grey;
}
.c-column {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 11px;
padding-right: 11px;
}
<div class="container-fluid no-gutters">
<div class="my-table col-9 table">
<div class="my-table-row-header row">
<div class="first-header-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-body">
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
</div>
</div>
</div>
Jsfiddle: https://jsfiddle.net/4zn5oby6/2/
If you try resizing your browser, you'll see the first column resizes accordingly. I expect it to follow the grid container size strictly.
P.S. Since my table contains other components (not just text), I would like to keep the display properties to assure my styling is on point if possible. Thanks.
I am not clear on what the question is exactly, but I noticed the col-9 needed to be in its own div. Then to equal 12 columns add the col-3 div after.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.my-table {
border: 1px solid grey;
display: table;
padding: 0;
}
.my-table-row-header {
display: table-header-group;
height: 50px;
}
.first-header-column {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.my-table-body {
display: table-row-group;
}
.my-table-row {
height: 50px;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
display: table-row;
}
.row-cell {
display: table-cell;
vertical-align: middle;
border-right: 1px solid grey;
}
.c-column {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 11px;
padding-right: 11px;
}
</style>
</head>
<body>
<div class="container-fluid no-gutters">
<div class="col-9">
<div class="my-table table">
<div class="my-table-row-header row">
<div class="first-header-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-body">
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
</div>
</div></div>
<div class="col-3"></div>
</div>
</body>
</html>
So, I found a way around it. Instead of using display: table-cell and all that vertical-align and text-align crap, I used display: flex which respected the bootstrap grid column width (which I'm still not sure why?).
Related
I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide
problem with set vertical align to content inside div
Example:
<div class="row border">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
<span class="align-middle">Short</span>
</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
<span class="align-middle">Long col with long text</span>
</div>
https://jsfiddle.net/lymychm/cuv10dqo/
I want to vertically show text in div's.
So if i set line-height to span it works, but when text has many words with spaces between them...each word now starts from new line and this line(each) has same line-height
Example:
https://jsfiddle.net/lymychm/prc2rstd/
This is what i want, but on div https://jsfiddle.net/lymychm/zn48z0ex/
.border {
border: 1px solid red;
}
.line-height-class {
line-height: 120px;
}
.abc { display: table;
width: 100px; /* width of parent */
height:100px; /* height of parent */
overflow: hidden; }
.inner {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
<div class="row border">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 abc">
<span class="align-middle inner">Short</span>
</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
<span class="align-middle">Long col with long text</span>
</div>
</div>
Use flexbox, See the example: https://jsfiddle.net/prc2rstd/6/
HTML,
<div class="box">
<div class="row align-middle">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 column">
<span>Short</span>
</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 column">
<span>Long col with long text</span>
</div>
</div>
</div>
CSS,
.box {
border: 1px solid red;
width: auto;
padding: 20px;
display: inline-block;
}
.align-middle {
display: flex;
align-items: center;
}
.column {
width: 70px;
}
As when float :left is used then it is hard to make it vertically align middle. we need to define row as a table and its inner div as table cell and remove floats from it. But somehow we have another good approach for it i.e using flexbox, demo https://jsfiddle.net/anmolsandal/cuv10dqo/1/
Updated css
.border {
border: 1px solid red;
display: flex;
align-items: center;
}
.line-height-class {
line-height: 120px;
}
code
<div class="row border">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
<span class="align-middle">Short</span>
</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
<span class="align-middle">Long col with long text</span>
</div>
</div>
you can add this code in your css,
.col-lg-1 {
display: inline-block;
vertical-align: middle;
float: none;
}
change that class name...
Expand the width of your div like this fiddle.
.border {
border: 1px solid red;
}
.line-height-class {
line-height: 120px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row border">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
<span class="align-middle line-height-class">Short</span>
</div>
<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 ">
<span class="align-middle line-height-class">Long col with long text</span>
</div>
</div>
I try to reach one point using div's and bootstrap. It should be in one line number of points and smaller information about points and in second area should be bootstrap icon and again information about icon.
My code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block">
<div class="col-md-5" style="padding: 0px; padding-left: 10px; ">
<i class="pull-left h2"><h2>72</h2></i> TWOJE PUNKTY
</div>
<div class="col-md-7" style="padding: 0px">
<i class="fa fa-trophy fa-2x pull-left"></i> WYRÓZNIENIE SZYBKI BILL
</div>
<br>
<table class="table">
<tr>
<th><h2>72</h2></th>
<th>you points</th>
<th><i class="fa fa-trophy fa-2x pull-left"></i></th>
<th>fastL</th>
</tr>
</table>
</div>
</div>
Try below code and you can adjust col- class according to you
.flex-div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.icon-text {
float: left;
margin-right: 10px;
font-size: 34px;
}
.icon-text h2 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block row-eq-height">
<div class="col-xs-6 flex-div">
<div class="icon-text">
<h2>72</h2>
</div>
<div class="info-text">
TWOJE PUNKTY<br/>
WYRÓZNIENIE SZYBKI BILL
</div>
</div>
<div class="col-xs-6 flex-div ">
<div class="icon-text">
<i class="glyphicon glyphicon-certificate"></i>
</div>
<div class="info-text">
Your Achivement Reached
</div>
</div>
</div>
</div>
You can achieve that effect using something like this.
HTML:
<div class="points"> 72 </div>
<div class="points-details">
Your
points
</div>
<div class="icon">+</div>
<div class="icon-details">
Your
Achievment
Reached
</div>
CSS:
.points{
display: inline-block;
}
.points-details{
display: inline-block;
}
.icon{
margin-left: 20px;
display: inline-block;
}
.icon-details{
display: inline-block;
}
I'm trying to get this result with boostrap :
The idea would be that : the black square stay as a square, even with the right "rows" being resized (on mobile for example)
And the red rows would be having the same height/width (I failed that on the image, just a quick paint mockup)
I'd love to show you some code that would be a starting point but after a few hours I'm unable to achieve this effect...
I found that template that use this kind of structure :
Gridus
Using flexbox as a wrapper.
* {
box-sizing: border-box;
}
.flexbox {
display: flex;
justify-content: left;
align-items: flex-start;
}
.col-md-10 {
border: thin solid darkgray;
max-height: 50px;
overflow: hidden;
height: 50px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row nopadding flexbox">
<a href="#">
<div class="col-md-4 vc-photo photo-01"><img src="http://placehold.it/150" /></div>
</a>
<div class="col-md-8 nopadding">
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
</div>
</div>
You mean something like this? I didn't bother with the borders, but I can put it if you like
.left-div {
background-color: pink;
height: 120px;
width: 120px;
float:left;
}
.right-div {
background-color: red;
height: 120px;
float:left;
}
.col-xs-12{
height: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="left-div">Column 1</div>
<div class="right-div">
<div class="row">
<div class="col-xs-12">Row 1</div>
<div class="col-xs-12">Row 2</div>
<div class="col-xs-12">Row 3</div>
</div>
</div>
</div>
</div>
I have a table like this which i created with div's. However, if a text is too long, then all the cells from this row will be filled with white background color.
* {
word-break: break-word;
}
div {
display: block;
border: 1px solid black;
}
.main_div {
background-color: #D8D8D8;
}
.row {
margin-left: 0px;
margin-right: 0px;
}
p {
display: inline;
}
#verzeichnis {
text-align: center;
}
.tabelle {
background-color: #AAAAAA;
border: 1px solid black;
}
.test {
background-color: #D8D8D8;
}
<div class="row">
<div class="col-sm-12 tabelle">
<p id="verzeichnis"> Test 1 </p>
</div>
<div class="row">
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>A</p>
</div>
<div class="col-sm-3" style="background-color: #A4AfA4;">
<p>Status</p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>B</p>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p id='Datei' class="dateiname_h" style="display:inline"> short text </p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>short text</p>
</div>
<div class="col-sm-3" style="background-color: #A4AfA4;">
<p><span style='color:green'><i class='fa fa-check-circle-o'></i></span></p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>very long text which should break to the next line because word wrap is set to break-word</p>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p id='Datei' class="dateiname_h" style="display:inline"> File <i id="dateiname_h_icon" class='fa fa-toggle-on pull-right'></i></p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>A</p>
</div>
<div class="col-sm-3" style="background-color: #A4AfA4;">
<p>Status</p>
</div>
<div class="col-sm-3" style="background-color: #D8D8D8;">
<p>B</p>
</div>
</div>
</div>
NOTE: stackoverflow does not seem to understand bootstrap, even though i included it as external library into my snippet. This is how it should look if you run the snippet:
My goal is to remove the white gap so it looks like this.
I would have used a real table for tabular data. Anyway, you can use CSS display:table for a workaround.
Parent:
.row {
margin-left: 0px;
margin-right: 0px;
display:table;
width:100%;
}
Children:
.row .col-sm-3 {
display:table-cell;
float:none;
}
I would suggest applying this CSS to to a specific container to minimize messing with bootstrap's default styling, like .customTable .row and .customTable .row .col-sm-3
jsFiddle example