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>
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>`
I have bootstrap table that looks like this:
As you can see the first column's text doesn't fit. How can I make first column text fit the column ?
Here's the code:
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover table-checkable order-column" id="matches_table">
<tbody>
{% for field, value in object.items %}
<tr class="odd gradeX">
<td width=""><b>{{ field|field_name_split|title }}</b></td>
<td width="">{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
Your code, don't have the . Below I have added a sample table bootstrap code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<table class="table table-striped table-bordered table-hover table-checkable order-column">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thanks,
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;"><p style="transform: rotate(270deg);white-space: nowrap;">1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>
The problem is that i want to have an vertical text and i used transform: rotate(270deg) but it makes the width of <td> not functionable. I wan to have an small one. Like:
Look here i have a picture
Use writing-mode and then rotate the text 180degrees.
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
MDN
p {
white-space: nowrap;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight">
<tbody>
<tr height="20">
<td rowspan="3">
<p>1.I have here some long title</p>
</td>
<td colspan="6" rowspan="3" width="384">Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
p {
word-break: break-all;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<table height="200" class="table table-bordered table-striped table-highlight" >
<tbody>
<tr height="20">
<td rowspan="3" width="4%" style="vertical-align: middle;padding: 2rem;"><p>1.I have here some long title</p></td>
<td colspan="6" rowspan="3" width="384" >Here i have some text</td>
</tr>
<tr height="20">
</tr>
<tr height="20">
</tr>
</tbody>
</table>
</div>
</body>
</html>
//screenshot is given below
1.I have here some long title.
Here i have some textHere i have some text
<tr>
<td style="vertical-align: middle;" rowspan="3" >
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
<tr>
<td style="vertical-align: middle;" rowspan="3">
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word; white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
</tbody>
</table>`enter code here`
</div>[![screenshot below][1]][1]
[1]: https://i.stack.imgur.com/6lfdT.png
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>