Bootstrap Table Not Responsive
I have a page that displays a bootstrap table. Unfortunately, the table does not become responsive. I have wrapped my table around a div with the "responsive table" class so that it is always responsive.
Full
Resize Medium
At this point I expect the table to become responsive with a horizontal scroll bar, but it does not.
Resize Small
At this point the "Contacts" area and "Coming Up" area is forced to wrap below the side bar and the table finally becomes responsive. I was hoping the table would have become responsive before the "Contacts" area and "Coming Up" area wrapped under the side bar.
Code
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords">
<meta name="description">
<title>
Contacts
</title>
<link rel="stylesheet" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Razor.Portal.styles.css">
<link rel="stylesheet" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/css/site.css">
</head>
<body>
<header>
<script src="/586E6FD5-5421-433D-BC0D-9137281AAAC9/lib/jquery/dist/jquery.js"></script>
<script src="/586E6FD5-5421-433D-BC0D-9137281AAAC9/lib/bootstrap/js/bootstrap.bundle.js"></script>
<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-light bg-white border-bottom box-shadow">
<a class="navbar-brand" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9">
<img src="/586E6FD5-5421-433D-BC0D-9137281AAAC9/data/logos/586E6FD5-5421-433D-BC0D-9137281AAAC9.png" alt="Logo" class="float-start img-fluid">
</a>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-auto col-md-3 col-xl-2" style="background-color: #1C4932">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 mb-auto min-vh-100" style="background-color: #1C4932">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">
<i class="fa-thin fa-gauge" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">
<i class="fa-thin fa-envelope" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Email</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa-thin fa-chart-bar" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Reports</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa-thin fa-gear" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Settings</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa-thin fa-user" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Profile</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="">
<i class="fa-thin fa-question-circle" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Help</span>
</a>
</li>
<li >
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Account/Signout">
<i class="fa-thin fa-right-from-bracket" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Signout</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col content-background">
<div class="row">
<nav aria-label="breadcrumb" class="mt-2 mobilecrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9">Home</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">Dashboard</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">Settings</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization">Organization</a></li>
<li class="breadcrumb-item active" aria-current="page">Contacts</li>
</ol>
</nav>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
</div>
<div class="row gx-2">
<div class="col-sm-12 col-lg-9">
<div class="p-3 backgroundWhite">
<h4>Contacts</h4>
<hr>
<div class="container">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td>someemail@gmail.com</td>
<td>(480) 345-2383</td>
<td>
<div class="btn-group float-end" role="group">
<a class="btn btn-primary text-white edit" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Edit?email=someemail@gmail.com"><i class="fas fa-edit fa-sm" aria-hidden="true"></i></a>
<button class="btn btn-success text-white details" data-email="someemail@gmail.com">
<i class="fas fa-list fa-sm" aria-hidden="true"></i>
</button>
<a class="btn btn-danger text-white delete" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Delete?email=someemail@gmail.com"><i class="fas fa-trash-alt fa-sm" aria-hidden="true"></i></a>
</div>
</td>
</tr>
<tr>
<td colspan="5" class="border-0">
<a class="btn btn-success float-end" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Add"><i class="fas fa-plus" aria-hidden="true"></i> Add</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-3 mt-2 mt-lg-0">
<div class="p-3 backgroundWhite">
<div class="row min-vh-100">
<div class="col-6"><h6>Coming Up</h6></div>
<div class="col-6 text-end">
<i class="fa-thin fa-calendar" aria-hidden="true"></i> <span class="align-text-top" style="font-size: x-small"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">View Calendar</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Some additional CSS
.mobilecrumb ol.breadcrumb {
flex-wrap: unset;
white-space: nowrap;
}
.mobilecrumb ol.breadcrumb > li:not(:first-child):not(:last-child) {
overflow: hidden;
text-overflow: ellipsis;
}
/* breakdown to hide it on small devices */
@media (max-width: 576px) {
.mobilecrumb ol.breadcrumb > li:not(:first-child):not(:last-child) {
visibility: hidden;
width: 0;
padding: 0;
}
.mobilecrumb ol.breadcrumb > li:last-child:before {
content: var(--bs-breadcrumb-divider, "/ ... /");
}
.mobilecrumb ol.breadcrumb > li:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
}
.content-background {
background: url('/data/dust_scratches.png');
}
.backgroundWhite {
background-color: white;
padding: 15px;
border-radius: 10px;
}
Any help guidance would be appreciated. I am sure I am doing something wrong.
Solution
You can have your side bar as full height by setting your menu and contact columns to be complementary: make the menu setup as col-2 col-sm-4 col-md-3 col-xl-2 (not col-auto for the smallest size) and the contact setup as col-10 col-sm-8 col-md-9 col-xl-10.
The table width will be 100% of the available space and the content of each cell will be wrapped so long as there is space. There is no connection between the text wrapping in a cell and what breakpoint you’ve selected. If you don’t want the text in a cell to wrap, apply .text-nowrap to the cell. If you want to apply nowrap based on screen width, you can create your own .text-nowrap-md using media queries, for example.
.mobilecrumb ol.breadcrumb {
flex-wrap: unset;
white-space: nowrap;
}
.mobilecrumb ol.breadcrumb>li:not(:first-child):not(:last-child) {
overflow: hidden;
text-overflow: ellipsis;
}
/* breakdown to hide it on small devices */
@media (max-width: 576px) {
.mobilecrumb ol.breadcrumb>li:not(:first-child):not(:last-child) {
visibility: hidden;
width: 0;
padding: 0;
}
.mobilecrumb ol.breadcrumb>li:last-child:before {
content: var(--bs-breadcrumb-divider, "/ ... /");
}
.mobilecrumb ol.breadcrumb>li:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
}
.content-background {
background: url('/data/dust_scratches.png');
}
.backgroundWhite {
background-color: white;
padding: 15px;
border-radius: 10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-light bg-white border-bottom box-shadow">
<a class="navbar-brand" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9">
<img src="/586E6FD5-5421-433D-BC0D-9137281AAAC9/data/logos/586E6FD5-5421-433D-BC0D-9137281AAAC9.png" alt="Logo" class="float-start img-fluid">
</a>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-2 col-sm-4 col-md-3 col-xl-2" style="background-color: #1C4932">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 mb-auto min-vh-100" style="background-color: #1C4932">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">
<i class="fa fa-gauge" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">
<i class="fa fa-envelope" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Email</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa fa-chart-bar" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Reports</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa fa-gear" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Settings</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">
<i class="fa fa-user" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Profile</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="">
<i class="fa fa-question-circle" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Help</span>
</a>
</li>
<li>
<a class="nav-link px-0 align-middle text-white" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Account/Signout">
<i class="fa fa-right-from-bracket" aria-hidden="true"></i> <span class="ms-1 d-none d-sm-inline">Signout</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-10 col-sm-8 col-md-9 col-xl-10 content-background">
<div class="row">
<nav aria-label="breadcrumb" class="mt-2 mobilecrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9">Home</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard">Dashboard</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">Settings</a></li>
<li class="breadcrumb-item"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization">Organization</a></li>
<li class="breadcrumb-item active" aria-current="page">Contacts</li>
</ol>
</nav>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
</div>
<div class="row gx-2">
<div class="col-12 col-lg-10">
<div class="p-3 backgroundWhite">
<h4>Contacts</h4>
<hr>
<div class="container">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="text-nowrap">John Smith</td>
<td>someemail@gmail.com</td>
<td class="text-nowrap">(480) 345-2383</td>
<td>
<div class="btn-group float-end" role="group">
<a class="btn btn-primary text-white edit" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Edit?email=someemail@gmail.com"><i class="fas fa-edit fa-sm" aria-hidden="true"></i></a>
<button class="btn btn-success text-white details" data-email="someemail@gmail.com">
<i class="fas fa-list fa-sm" aria-hidden="true"></i>
</button>
<a class="btn btn-danger text-white delete" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Delete?email=someemail@gmail.com"><i class="fas fa-trash-alt fa-sm" aria-hidden="true"></i></a>
</div>
</td>
</tr>
<tr>
<td colspan="5" class="border-0">
<a class="btn btn-success float-end" href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings/Organization/Contacts/Add"><i class="fas fa-plus" aria-hidden="true"></i> Add</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-2 mt-2 mt-lg-0">
<div class="p-3 backgroundWhite">
<div class="row min-vh-100">
<div class="col-6">
<h6>Coming Up</h6>
</div>
<div class="col-6 text-end">
<i class="fa fa-calendar" aria-hidden="true"></i> <span class="align-text-top" style="font-size: x-small"><a href="/586E6FD5-5421-433D-BC0D-9137281AAAC9/Dashboard/Settings">View Calendar</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<p>Question <a href="https://stackoverflow.com/questions/78987874/bootstrap-table-not-responsive">Stack Overflow</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>- Prevent Bootstrap table-hover Class from Changing Background Color of Cells in a Table
- Bootstrap Table Not Responsive
- How to enable Bootstrap popovers only for certain (large) breakpoints?
- Twig file doesn't display anything (SYMFONY 4.4)
- Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'
- How to prevent too long text expand its parent div
- How can I open multiple Bootstrap 5 modals without closing the old ones?
- What's the best practice for using multiple data-bs-toggle (modal and tooltip)?
- How to add space between two buttons?
- Bootstrap 5 Columns Add Gutter
- Bootstrap 5 underline default changed?
- Vuejs 3 and Bootstrap 5 Modal Reusable Component Show Programmatically
- Bootstrap 5 offcanvas scrolls back to top on close
- Popover on Table Cell Depending on the Value
- sidebar sticking to the top of the page and not the top of the screen
- Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen
- Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') while using bootstrap 5 modal in react
- Styling input["range"] in Bootstrap 5 and Angular
- How do the "aria-describedby" and "aria-hidden" attributes work in Bootstrap?
- Where to include jquery script in Blazor web app in ASP.NET Core 8?
- How to make bootstrap datepicker be always visible/open?
- Bootstrap 5 popover html content
- Bootstrap menu dropdown not working on Blazor WebApp
- How can I close the dropdown programmatically on button click?
- Bootstrap 5 - mt-5 overrides mt-md-0 on ≥768px screen size
- Adding a dark mask to a video tag
- How can I toggle content in tabs in Bootstrap 5?
- Bootstrap 5 row/col structure
- Set custom Bootstrap invalid/valid messages
- Prevent Boostrap form control focus glow on click