I have a weird problem. The color won't show in a table:
What am I doing wrong?
The "danger" class should as far as I know work here.
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td class="danger col-md-1">
33
</td>
<td class="danger col-md-2">
Something
</td>
<td class="danger col-md-1">
Something else
</td>
<td class="danger col-md-2">
DATE
</td>
<td class="danger">
Description.........
</td>
</tr></tbody></table>
For text coloring use text-danger, for background coloring use bg-danger.
As far as I know, there is no danger class in Bootstrap.
As explained by the bootstrap color documentation.
The class: bg-danger - Changes background color to red.
The class: text-danger - Changes the font color to red.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td class="bg-danger col-md-1">
33
</td>
<td class="text-danger col-md-2">
Something
</td>
<td class="danger col-md-1">
Something else
</td>
<td class="danger col-md-2">
DATE
</td>
<td class="danger">
Description.........
</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You use the wrong class try this :
<td class="bg-danger col-md-1">
33
</td>
if you use bootstrap 4 , the correct class is table-danger see this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<td class="col-md-1">
33
</td>
<td class="col-md-2">
Something
</td>
<td class="col-md-1">
Something else
</td>
<td class="col-md-2">
DATE
</td>
<td class="">
Description.........
</td>
</tr>
<tr class="">
<td class="col-md-1">
33
</td>
<td class="table-danger col-md-2">
Something
</td>
<td class="col-md-1">
Something else
</td>
<td class="col-md-2">
DATE
</td>
<td class="table-danger">
Description.........
</td>
</tr>
</tbody></table>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Related
This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>
You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody
use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`
Why there is an extra column in the table?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<center>
<a href="./" class="btn btn-primary">
<i class="far fa-hand-point-left"></i> Back
</a>
<br /><br />
<table class="table table-striped table-hover table-bordered table-responsive">
<thead>
<tr>
<th>Sr.</th>
<th>Name</th>
<th>Contact</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
Name</td>
<td>Email Id (Mobile Number)</td>
<td>City</td>
<td><button class="btn btn-large btn-primary" disabled>Waiting for Directory</button></td>
</tr>
<tr>
<td>2</td>
<td>
Name</td>
<td>Email Id (Mobile Number)</td>
<td>City</td>
<td>Block</td>
</tr>
</tbody>
</table>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Why there is an extra column in the table? see image
Also, why there is scrollbar when screen is small? (It should adjust itself with the screen as I am using table-responsive.)
add .table-responsive class to the parent. not on table
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Remove .table-responsive or add style attribute on table tag display : table
<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn collapsed" data-toggle="collapse" data-target="#collapseCategory" aria-controls="collapseCategory" aria-expanded="false">category1
</button>
</td>
</tr>
<div class="collapse list-group" id="collapseCategory">
<tr>
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr>
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</div>
</tbody>
</table>
I am trying to make a category in a table that is clickable to show and hide the items that belong in that category in a table. I have used the collapse feature of bootstrap multiple times before but it seems to be different when it comes to a collapsing a row in a table that targets other multiple rows. Any help would be appreciated.
That div that you have in your tbody is getting automatically removed by the browser because it is invalid.
Try this instead:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style> html { overflow-y: scroll; } </style>
<table class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col" width="50%">Stock Quantity</th>
</tr>
</thead>
<tbody>
<tr class="categoryRow">
<td id="categoryTd" colspan="5">
<button class="btn" data-toggle="collapse" data-target=".collapseCategory" aria-expanded="true">category1
</button>
</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item1</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item2</td>
<td class="stockQuantity">3</td>
</tr>
<tr class="collapseCategory collapse show">
<td>Item3</td>
<td class="stockQuantity">3</td>
</tr>
</tbody>
</table>
I have a simple Bootstrap 4 table with 2 columns - I would like to be able to align some of the text in the top right column to the right, whilst leaving the remaining text in that cell left aligned.
Here's my table:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I'm trying to get the On Special string to be aligned to the right and on the same line as the SKU value - I've tried playing with and and but can't seem to get this to work. I'm not sure if this is even possible or if there's another way to tackle this problem?
It's quite simple; you just need to replace,
<div class="text-right">On Special</div>
with
<div class="float-right">On Special</div>
Find the complete working code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span style="float: right;">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
.text {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
Just change you this code :
<div class="text-right">On Special</div>
To this code :
<div style="float:right;">On Special</div>
You could start with something like this.
.text-right {
display: inline;
position: absolute;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>