I have added a font awesome icon in a table by using the following code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Can anyone please tell me how to bring this icon to the bottom line and center of that column, i.e. one half of this icon is inside and the other half is outside the table.
You could achieve this by setting the containing div to position: relative and define for the icon position: absolute and top: 0.375rem, the half of the padding of the containing div (0.75rem).
.form-group div {
position: relative
}
a.fa-plus-circle {
position: absolute;
top: 0.375rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</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'm trying to vertically align the column header the carets, but as you can see they are currently misaligned.
What I have so far (this is using bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<link rel="stylesheet" href="css/all.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<div style="float: right; display: inline;">
<div style="height: 16px">
<i class="fas fa-caret-up" style="height: fit-content; vertical-align: bottom; font-size: 20px;"></i>
</div>
<div style="height: 16px;">
<i class="fas fa-caret-down" style="height: fit-content; vertical-align: top; font-size: 20px;"></i>
</div>
</div>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It produces this on my chrome:
The "Title" is too high and the carets are too low. How would I align them vertically in the middle of the header.
th {
vertical-align: top;
position: relative;
}
th .fas {
position: absolute;
right: 8px;
line-height: 24px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<i class="fas fa-sort"></i>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
You can try :
th {
vertical-align: bottom;
text-align:center;
}
it should align your theads to the bottom center
I have created a table which include a "+" font awesome icon.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Now how to add a new row by clicking on the "+" icon?
You can't add another row without using javascript or Jquery. here is a solution:-
function addrow(){
var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'><div class='justify-content-center' style='position: absolute; width: 100%; left: 50%;'></div></td></tr>";
document.getElementById("myList").insertAdjacentHTML('beforeend', row);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody id="myList">
<tr >
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
</td>
</tr>
</tbody>
<tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
</table>
</body>
</html>
I want to put two bootstrap tables side by side like it is answered in this question:
Two side by side tables in bootstrap
Unfortunately I don't get the result mentioned there.
My Code looks like this:
<html>
<style>
body {background-color: black;}
</style>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
And what I get looks like this:
Thanks in advance
Try Its :
<!DOCTYPE html>
<html lang="en">
<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.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="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
You have typo in your code. you need to replace
<div class="col-sx-6">
with
<div class="col-xs-6">
You've made a typo on both the columns.
You wrote col-sx-6 instead of col-xs-6. (column, show it like this on extra small screens and bigger, width of 6)
When using col-sx-6, it is just a div, which will be 100% wide.
Changing it to col-xs-6 will fix your problem.
Also, in bootstrap it is common to place your <div class="row"> inside a <div class="container">.
See: https://getbootstrap.com/docs/3.3/css/#overview-container
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Your code, using col-xs-6</h1>
<div class="row">
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
<h1>Corrected code using col-xs-6</h1>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
You should do something like below, for all resolutions:
col-lg-6 col-md-6 col-sm-6 col-xs-6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
If you want two tables(side by side) in mobiles screen and desktop screen, then - change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
And if you want two tables in desktop screen and not in mobile screen.
Change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
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>