Vertically center all table row elements in Bootstrap - html

I can't seem to vertically align all the different types of elements in my Bootstrap table row. I want the "select" dropdown, description text and button to all appear vertically centered. What do I need to do to fix this?
Here's the code:
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testing...</title>
<style>
td {
height: 1em;
vertical-align: middle;
}
</style>
</head>
<body>
<div style="margin-left: 0px">
<table class="table table-striped table-hover">
<colgroup>
<col span="1" style="width: 4em">
<col span="1" style="width: 15em">
<col span="1" style="width: 4em">
</colgroup>
<tbody>
<tr scope="row"><td>
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td><td>Apples</td><td>10lb</td><td><button type="button" class="btn btn-primary btn-sm">Add</button></td></tr>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>


set vertical-align:middle to .table class table data.
.table td {
height: 1em;
vertical-align: middle;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testing...</title>
<style>
.table td {
height: 1em;
vertical-align: middle;
}
</style>
</head>
<body>
<div style="margin-left: 0px">
<table class="table table-striped table-hover">
<colgroup>
<col span="1" style="width: 4em">
<col span="1" style="width: 15em">
<col span="1" style="width: 4em">
</colgroup>
<tbody>
<tr scope="row">
<td>
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td>Apples</td>
<td>10lb</td>
<td><button type="button" class="btn btn-primary btn-sm">Add</button></td>
</tr>
</table></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Solution 2: you can also use !important to override the css properties.
td {
height: 1em;
vertical-align: middle !important;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testing...</title>
<style>
td {
height: 1em;
vertical-align: middle !important;
}
</style>
</head>
<body>
<div style="margin-left: 0px">
<table class="table table-striped table-hover">
<colgroup>
<col span="1" style="width: 4em">
<col span="1" style="width: 15em">
<col span="1" style="width: 4em">
</colgroup>
<tbody>
<tr scope="row">
<td>
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td>Apples</td>
<td>10lb</td>
<td><button type="button" class="btn btn-primary btn-sm">Add</button></td>
</tr>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Solution 3: using bootstrap add align-middle class to td.
<tr scope="row">
<td class="align-middle">
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td class="align-middle">Apples</td>
<td class="align-middle">10lb</td>
<td class="align-middle"><button type="button" class="btn btn-primary btn-sm">Add</button></td>
</tr>
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testing...</title>
<style>
td {
height: 1em;
}
</style>
</head>
<body>
<div style="margin-left: 0px">
<table class="table table-striped table-hover">
<colgroup>
<col span="1" style="width: 4em">
<col span="1" style="width: 15em">
<col span="1" style="width: 4em">
</colgroup>
<tbody>
<tr scope="row">
<td class="align-middle">
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td class="align-middle">Apples</td>
<td class="align-middle">10lb</td>
<td class="align-middle"><button type="button" class="btn btn-primary btn-sm">Add</button></td>
</tr>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>


<table class="table table-striped table-hover" **row**>
<colgroup>
<col span="1" style="width: 4em">
<col span="1" style="width: 15em">
<col span="1" style="width: 4em">
</colgroup>
<tbody>
<tr scope="row"><td>
<select class="form-control" id="qty">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td><td>Apples</td><td>10lb</td><td><button type="button" class="btn btn-primary btn-sm">Add</button></td></tr>
</table>

Related

How to adjust td text height when other row's input fields are set to top in an HTML table?

I had to align the rows' tds's input field to top, because some may have up to 3 rows, but the total and the checkbox at the end of the row are also aligned to the top. I've tried doing some padding so that these 2 stay vertically aligned to the middle, but without success...
.total_price,
.total_terms {
text-align: right;
font-weight: bold;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
</head>
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%">Yards</th>
<th style="width:9%">Total FOB</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
</html>

You can use vertical-align: middle !important; to force that style.
.total_price,
.total_terms {
font-weight: bold;
vertical-align: middle !important;
}
.total_price {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
</head>
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%">Yards</th>
<th style="width:9%">Total FOB</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td class="total_terms"><input type="checkbox"></td>
</tr>
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td class="total_terms"><input type="checkbox"></td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
</html>

How to remove space between Bootstrap table rows?

This Codepen works, but I'm not sure this is the same table type.
This is the Fiddle.
#buyer {
border-collapse: separate;
border-spacing: 0 0px;
}
tr {
background: pink; /* added by community */
}
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<div id="buyerTable" class="table-bordered">
<table class="table table-borderless" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
</tr>
</tbody>
</table>
</div>
Appreciate any help!

There is default padding: .75rem; on td (not tr) from the Bootstrap.
You can eliminate the spacing by using the p-0 which specifies padding: 0;.
#buyer {
border-collapse: separate;
border-spacing: 0 0px;
}
tr {
background: pink;
/* added by community */
}
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<div id="buyerTable" class="table-bordered">
<table class="table table-borderless mb-0" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address p-0">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
</tr>
</tbody>
</table>
</div>

Add new row to a table by clicking the icon

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>

How to add row to a bootstrap table using button

I am trying to add a row to the table when the add button is clicked and add and delete both buttons are working properly but when i add data-toggle="table" in the table tag the add and delete buttons are not working if i remove the data-toggle option i am losing features such as pagination and table styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table"
data-toggle="table"
data-mobile-responsive="true"
data-pagination="true"
data-height="460"
>
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<select id="ex1" required >
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td >
<input id="ex2" type="number">
</td>
<td >
<input id="ex3" type="number">
</td>
<td >
<input id="ex4" type="number">
</td>
<td >
<button class="btn btn-outline-success" id="addrow" class="addnew" > Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function(){
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function () {
$(this).closest('tr').remove();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>

The order is wrong. Add the JS library before your script...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table" data-toggle="table" data-mobile-responsive="true" data-pagination="true" data-height="460">
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td>
<input id="ex2" type="number">
</td>
<td>
<input id="ex3" type="number">
</td>
<td>
<input id="ex4" type="number">
</td>
<td>
<button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<!-- Unrelated: version incompatibility
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
-->
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function() {
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>

Bootstrap color won't show in table

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>