There is a gap between elements of an input group, if put into a table.
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>There is a gap between spans in tables</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
How can I get rid of this gap?
You could try removing the border-spacing added by the table. Alternatively, you can set the border-collapse to collapse if you prefer the way that looks.
border-spacing is inherited by default in CSS by child elements. input-group is set to display: table which means it inherits the borders-spacing: 2px from the parent table. This means it will be applied to input-group-addons since they are being displayed as table cells.
table .input-group {
border-spacing: 0;
}
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>Previously a gap between elements</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
Related
I am trying to use bootstrap to align my h3 headings with my h5 so that they are in line with each other.
EDIT
I am trying to use the already available bootstrap and avoid changing the css unless absolutely necessary.
Here is a screen to demonstrate what i mean.
E.g. First name should line up with address 1, last name with address 2 etc.
here is the code I have.
<div class="row ">
<div class="col-md-4 ">
<h3>First Name</h3>
<h3>Last Name</h3>
<h3>Week.</h3>
<h3>Code.</h3>
</div>
<div class="col-md-4 ">
<h5>Address 1</h5>
<h5>Address 2</h5>
<h5>Address 3</h5>
<h5>Country</h5>
</div>
</div>
That's not what headers are for. (semantically incorrect, search engines won't like this)
I suggest to simply use a table for this (it IS tabular data) and use different CSS rules for td:first-child and td:nth-child(2) in order to get the different font sizes.
.x {
width: 100%;
}
.x td {
padding: 10px;
font-family: sans-serif;
font-weight: light;
}
.x td:first-child {
font-size: 24px;
width: 60%;
}
.x td:nth-child(2) {
font-size: 16px;
width: 40%;
}
<table class="x">
<tr>
<td>First Name</td>
<td>Address 1</td>
</tr>
<tr>
<td>Last Name</td>
<td>Address 2</td>
</tr>
<tr>
<td>Week.</td>
<td>Address 3</td>
</tr>
<tr>
<td>Code.</td>
<td>Country</td>
</tr>
</table>
Better not to mess with the h3/h5 heights, and use multiple rows instead. E.g. what if one of the texts becomes so long that it wraps? Then you can say bye-bye to your aligned layout. That will never happen if you use multple rows:
<div class="row">
<div class="col-md-4">
<h3>First Name</h3>
</div>
<div class="col-md-4">
<h5>Address 1</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Last Name</h3>
</div>
<div class="col-md-4">
<h5>Address 2</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Week.</h3>
</div>
<div class="col-md-4">
<h5>Address 3</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Code.</h3>
</div>
<div class="col-md-4">
<h5>Country</h5>
</div>
</div>
Apart from all this: I agree with the remarks by others that you shouldn't be using h3/h5 in the first place. Headers are intended to define relations between logical units of text, so <h5> is the header of a sub-sub section of text inside a chapter of text that is headed by a <h3> tag.
set same line-heigt, margins, and padding for h3&h5 in css styles
I am re-doing the front-end of an application using bootstrap 4. The application uses tables in some places that I wish it didn't so I am re-working those tables into a .row/.col grid system. The nice part about tables in bootstrap is that there appear to be styling options available for tables but none seem to exist for rows and columns. You can see in the snippet that it's automatically styling the table but how can I do that using grid?
For example:
<!DOCTYPE html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead class="thead-light">
<th>Thing one</th>
<th>Thing two</th>
<th>Thing Three</th>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</tbody>
</table>
<div class="container">
<div class="row">
<div class="col">
Thing one
</div>
<div class="col">
Thing two
</div>
<div class="col">
Thing three
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
<div class="row">
<div class="col">
Four
</div>
<div class="col">
Five
</div>
<div class="col">
Six
</div>
</div>
<div class="row">
<div class="col">
Seven
</div>
<div class="col">
Eight
</div>
<div class="col">
Nine
</div>
</div>
</div>
</body>
You'd add CSS to get the same styles...
.grid-striped .row:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
Or, use the Bootstrap 4 utilities (ie: font-weight-bold, bg-light, etc..) but these would need to be applied individually and won't automatically alternate odd rows like the CSS above.
Demo: https://www.codeply.com/go/IDBemcEAyL
Also remember that table columns can use the grid
I don't know why, but width of my table on very small sizes is going over the background on the right ( outside the screen of the phone ) . On 412 px it works, but on 320 px don't want to be nice and my table go outside screen and everything is cut.
.ania-center {
margin: auto;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Rejestracja on-line
<strong>bez kolejek!</strong>
</h2>
<hr>
<h2 class="text-center">Lista lekarzy</h2>
<br/>
<table class="table table-responsive table-striped ania-center">
<tr>
<th>Imie i nazwisko</th>
<th>Gabinet</th>
<th>Telefon</th>
<th>Rejestracja on-line</th>
</tr>
#foreach($doctors as $doctor)
<tr>
<td>
{{$doctor['imie']}} {{$doctor['nazwisko']}}
</td>
<td>
{{$doctor['gabinet']}}
</td>
<td>
{{$doctor['telefon']}}
</td>
<td>
umów wizyte
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
You need to wrap the table inside a div and give it a class .table-responsive
This class doesn't work directly on the table.
See result below:
.ania-center {
margin: auto;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Rejestracja on-line
<strong>bez kolejek!</strong>
</h2>
<hr>
<h2 class="text-center">Lista lekarzy</h2>
<br/>
<div class="table-responsive">
<table class="table table-striped ania-center">
<tr>
<th>Imie i nazwisko</th>
<th>Gabinet</th>
<th>Telefon</th>
<th>Rejestracja on-line</th>
</tr>
#foreach($doctors as $doctor)
<tr>
<td>
{{$doctor['imie']}} {{$doctor['nazwisko']}}
</td>
<td>
{{$doctor['gabinet']}}
</td>
<td>
{{$doctor['telefon']}}
</td>
<td>
umów wizyte
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
</div>
I'm trying to create a complex layout using table in twitter-bootstrap. However, I'm not able to get it perfectly right! Particularly, where 5 is displayed!
Is it possible to achieve the same using div's instead? How would I get the borders in that case?
Please check the design attached.
<div class="container">
<table class="table table-bordered" style="width:80%">
<tr>
<td class="col-md-6" colspan="4"><strong>1</strong></td>
<td class="col-md-4" rowspan="3"><img src="#" /></td>
<td class="col-md-2" rowspan="3"><button class="del-icon">X</button></td>
</tr>
<tr>
<td class="col-md-3"><strong>2</strong></td>
<td class="col-md-3"><strong>3</strong></td>
</tr>
<tr>
<td><strong>4</strong></td>
<td><strong>5</strong></td>
</tr>
</table>
</div>
Yes it is possible, you just add row to 2,3 then another row for 4,5
<div class="row">
<div class="col-md-6 blue1">
1
<div class="row">
<div class="col-md-6 blue2">2</div>
<div class="col-md-6 blue3">3</div>
</div>
<div class="row">
<div class="col-md-2 blue4">4</div>
<div class="col-md-10 blue5">5</div>
</div>
</div>
<div class="col-md-4 blue6">
img
</div>
<div class="col-md-2 blue7">
x
</div>
Bootply: http://www.bootply.com/mraM3WKCvt
Hope that helps, cheerio!
I have a complicated layout created with real tables and it works fine but now I created a new layout using DIVS and it worked fine until I tested height on cellphones and it looks pretty bad, it just don't want to keep my height 100% tested also set footer to margin bottom 0 and nothing so I will test the follow:
<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
<tr>
<td style="height:21px;">
<DIV style="display: table-cell;"> divvvvv </div></td>
</tr>
<tr>
<td style="height:79px;"">
</td>
</tr>
<tr>
<td style="height:100%;"> </td>
</tr>
<tr>
<td style="height:21px;"> </td>
</tr>
</table>
The question is, can I add those divs inside the table TD element without adding div-display-table and div-display-row before? It seems like the best way to go for me is to mix tables and divs. What would then be the correct way of mixing them? Because TDs in Tables will not respect the height and width neither so I must use both tables and divs seems like ...
Like this:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
Mixing in table elements with divs is eventually going to give you a headache, especially when it comes to responsive design. For this same issue, I use Bootstrap CSS. They have a grid system that is extremely effective in replacing table-style layouts and adapting to mobile devices. Your target HTML is actually really close to the markup that Bootstrap uses, so your head is obviously int he right place!
After downloading the Bootstrap js and css, I would do something like this:
<!-- the container-fluid class creates a full-width container -->
<div class="container-fluid">
<!-- the row class creates a row broken into 12 columns. -->
<div class="row">
<!-- specify how many columns an element should take up out of 12 for each given device. below is the markup for 3 evenly-spaced columns for a medium (desktop) device -->
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
I tried to understand what you are wanting but it wasn't very clear...so this is what I assumed you meant.
DEMO
CSS:
.container {
display:table;
height:200px;
border:1px solid red;
}
.column {
display:inline-block;
}
table {
border: 1px solid black;
}
td {
width:150px;
border: 2px solid blue;
}
HTML:
<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
<tr>
<td style="height:21px;">
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="height:79px;"">
</td>
</tr>
<tr>
<td style="height:100%;"> </td>
</tr>
<tr>
<td style="height:21px;"> </td>
</tr>
</table>