Column width in Bootstrap - css

Please bear with me if this is a simple question (I'm an iOS developer trying to learn CSS-Bootstrap.
I first played with rows :
<div class="row">
<div class="col col-1">
<p>Plan</p>
</div>
<div class="col col-2">
<p>Date</p>
</div>
<div class="col col-2">
<p>Person</p>
</div>
<div class="col col-3">
<p>Description</p>
</div>
<div class="col col-1">
<p>Time</p>
</div>
<div class="col col-3">
<p>Line</p>
</div>
</div>
And this was perfect :
I then tried to do the same with tables, first without setting the columns for the grid :
<div class="container-fluid">
<table class="table">
<thead>
<tr>
<th">Plan</th>
<th">Date</th>
<th>Person</th>
<th>Description</th>
<th>Time</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" name="Plan"> </td>
<td> <input type="date" name="date"> </td>
<td> <input type="text"></td>
<td> <input type="text"></td>
<td> <input type="time"></td>
<td> <input type="text"></td>
</tr>
<tr>
<td> <input type="checkbox" name="Plan"> </td>
<td> <input type="date" name="date"> </td>
<td> <input type="text"></td>
<td> <input type="text"></td>
<td> <input type="time"></td>
<td> <input type="text"></td>
</tbody>
</table>
</div>
Not bad but I want some columns to be smaller (Plan, Time, Date) and others to be bigger. So I added the classes for those columns (just like I did when experimenting with rows :
<div class="container-fluid">
<table class="table">
<thead>
<tr>
<th class="col col-1">Plan</th>
<th class="col col-2">Date</th>
<th class="col col-2">Person</th>
<th class="col col-3">Description</th>
<th class="col col-1">Time</th>
<th class="col col-3">Line</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col-1"> <input type="checkbox" name="Plan"> </td>
<td class="col col-2"> <input type="date" name="date"> </td>
<td class="col col-2"> <input type="text"></td>
<td class="col col-3"> <input type="text"></td>
<td class="col col-1"> <input type="time"></td>
<td class="col col-3"> <input type="text"></td>
</tr>
<tr>
<td class="col col-1"> <input type="checkbox" name="Plan"> </td>
<td class="col col-2"> <input type="date" name="date"> </td>
<td class="col col-2"> <input type="text"></td>
<td class="col col-3"> <input type="text"></td>
<td class="col col-1"> <input type="time"></td>
<td class="col col-3"> <input type="text"></td>
</tbody>
</table>
</div>
But to my surprise. The first column (Plan) was lot bigger (and not smaller) and the other all remained the same:
I tried with setting the in both header and body (like code above) and only in header. The result was the same.

First things first, the first table item (Plan) is much larger when you are using columns because of "container-fluid". Try just "container". Per the documentation, "container-fluid" is full width which means it is expanding to fill the screen.
Next, columns are not what you would need to make the table items widths smaller.
The top layout is with column classes with the table. The bottom layout is a standard table layout with no column classes. As you can see, the smallest possible column width (col-1) is larger than the default sizing for the table items. If you want something to be smaller than that (the default sizing for the table), then you will have to mess around with the sizing of the table itself. (setting the padding-right or padding-left to 0rem for specific td elements helps trim the excess spacing for example)
my code for the "columned" table:
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-xl-1">Plan</th>
<th class="col-xl-2">Date</th>
<th class="col-xl-2">Person</th>
<th class="col-xl-3">Description</th>
<th class="col-xl-1">Time</th>
<th class="col-xl-3">Line</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xl-1"> <input type="checkbox" name="Plan"></td>
<td class="col-xl-2"> <input type="date" name="date"> </td>
<td class="col-xl-2"> <input type="text"></td>
<td class="col-xl-3"> <input type="text"></td>
<td class="col-xl-1"> <input type="time"></td>
<td class="col-xl-3"> <input type="text"></td>
</tr>
<tr>
<td class="col-xl-1"> <input type="checkbox" name="Plan"> </td>
<td class="col-xl-2"> <input type="date" name="date"> </td>
<td class="col-xl-2"> <input type="text"></td>
<td class="col-xl-3"> <input type="text"></td>
<td class="col-xl-1"> <input type="time"></td>
<td class="col-xl-3"> <input type="text"></td>
</tbody>
</table>
</div>
By the way I am using bootstrap version 4 alpha 6. If you are on a lower version of bootstrap, replace all instances of "col-xl-#" with "col-lg-#". The newest bootstrap has xl as its largest size.

Related

aligning all input fields perfectly

I want to align all the input fields in a single line inside a table.
Currently I have 3 input fields and 2 select fields in a table. They are getting displayed like this
I want all that input fields in a same straight line.
Both the select fields looks like they have top margin but I didn't use any margin properties on that.
That's the code which I have used to display this.
<div class="content">
<div class="white-bg md-whiteframe-4dp">
<table class="dataTable row-border hover" datatable="ng" dt-options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">S.No.</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Material Group</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Estimated Quantity</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Discount Rate</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Currency</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Total Discount</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ::vm.tableData">
<td>
{{row.id}}
</td>
<td>
<md-input-container class="md-block">
<md-select ng-model="row.materialGroupName" placeholder="Weapon">
<md-option value="null" selected disabled>Material Group Name</md-option>
<md-option value="group1">Group 1</md-option>
<md-option value="group2">Group 2</md-option>
<md-option value="group3">Group 3</md-option>
</md-select>
</md-input-container>
</td>
<td>
<md-input-container class="md-block">
<input type="number" ng-model="row.quantity">
</md-input-container>
</td>
<td>
<md-input-container class="md-block">
<input type="number" ng-model="row.discountRate">
</md-input-container>
</td>
<td>
<md-input-container>
<md-select class="md-block" ng-model="row.currency">
<md-option value="null" selected disabled>Select Currency</md-option>
<md-option value="inr">INR</md-option>
<md-option value="usd">USD</md-option>
<md-option value="gbp">GBP</md-option>
</md-select>
</md-input-container>
</td>
<td>
<md-input-container class="md-block">
<input type="number" ng-model="row.total">
</md-input-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I've also tried to remove the margin which md-input-container brings with him but that didn't work for me.

Bootstrap Custom Radiobox without Label is dis-aligned

I am using Bootstrap4 custom radiobutton and it works fine as long as I use Label text. Sometimes it makes no sense to have text, but then the radiobutton alone is dis-aligend. How can this be fixed?
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
Result:
Fiddle: https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Using a special character which does not print anything will allow you to get the proper alignment without showing any text next to the radio button.
‌
My guess on why it messes up the styling is because of the ::before and ::after code that gets added to the text. If there is no text there is nothing to add the tags to.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">‌</label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Add mb-3 class on the empty label
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>

Bootstrap table overflows from div in Chrome

I'm using latest bootstrap 4.0 and have an issue with overflowing table in Chrome browser.
In Firefox it scales correctly:
I have been trying several tricks and tips, but no luck. I wonder if it is some bug in Chrome actually?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid ">
<div class="titled-container-header">
Täiendkoolitused - Standardolukorrad
</div>
<div class="titled-container-body">
<div class="row">
<div class="col-sm-auto">
<table class="table table-responsive table-secondary">
<tbody>
<tr valign="top">
<td class="label">Koolitusele pääsemise tingimused</td>
<td>Koolitus on mõeldud treeneritele,kelle treenitavad võistkonnad mängivad 11v11.
</td>
</tr>
<tr valign="top">
<td class="label">Info</td>
<td>Koolitus on mõeldud vähemalt EJL C litsentsi treeneritele, kelle treenitavad võistkonnad mängivad 11v11.
<br>
<br>Räägime standardolukordade tähtsusest jalgpallis -filosoofiad, trendid ja mängijate treenimise ning õpetamise
võimalustest.
</td>
</tr>
<tr valign="top">
<td class="label">Vabu kohti</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-auto pad-left">
<table class="table-bordered table-responsive table-primary">
<tbody>
<tr>
<th>
<label for="address">Elukoha aadress</label>
</th>
<td>
<input type="text" id="address" name="address">
</td>
</tr>
<tr>
<th>
<label for="phone">Telefon</label>
</th>
<td>
<input type="text" id="phone" name="phone">
</td>
</tr>
<tr>
<th>
<label for="email">Email</label>
</th>
<td>
<input type="text" id="email" name="email">
</td>
</tr>
<tr>
<th>
<label for="invoice_name">Arve saaja nimi</label>
</th>
<td>
<input type="text" id="invoice_name" name="invoice_name">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

Size input text inside of table using bootstrap's classes

I have the code below where I'm trying to size a text input element using bootstrap's classes. However, I cannot get the thing to size down. I want it to be smaller on desktop, instead of taking up a massive amount of room.
<div class="container White_BG">
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Quickly place your order with this form.</h1>
<h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>
<div class="table-responsive">
<form method="post" name="QuickOrderMulti">
<table class="table table-bordered table-condensed table-hover">
<tr>
<th>Item #</th>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
<td>
<input type="text">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
The offending line is:
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
I tried using the col-lg-2 to make it only take up 2 grid columns, so maybe it'd be smaller. But no such luck.
Rather than surrounding it in a div, try making the input with the chosen class.
e.g.
<input class="col-lg-2" type="text">

How to inline input and glyph icon in table cell in bootstrap3?

I cannot get my glyph icon in one line with input in bootstrap3. How can I do it please, I tried many classes, but evidently none of them worked.. The glyphicon is still displayed on another line , the input is too long. It works only if I set manually width of input, and that is not the best way..
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="row-fluid form-inline">
<input class="form-control input-sm" type="text" id="inputSmall">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</td>
</tr>
</tbody>
</table>
One solution could be:
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputSmall">
<a class="input-group-addon" href="#"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</td>
</tr>
</tbody>
</table>
You may also check the official documentation of Input groups.
It seems you're looking to append an icon at the end of a small input, within a table cell. This should be done as a button, and the Bootstrap 3 code would be as follows:
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<td class="search-header">Legend:</td>
<td><div class="input-group">
<input type="text" class="form-control input-sm" id="inputSmall">
<span class="input-group-btn">
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-question-sign"></i></button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Note that if you want to control the width of this element group you'll need to wrap it in a DIV and apply the appropriate class for whatever width you desire.
UPDATE: JSFiddle demo

Resources