Menu
With Bootstrap 4, when table-responsive is added to the table, the text is no longer center vertically. Is it a bug ? If not, is there a simple solution to get the text centered in the middle. A pure Bootstrap solution will be appreciated.
Here is an illustration of the problem.
<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="bg-danger table-responsive" style="width:300px; height:200px;">
<tr>
<th scope="row">
<div class="text-left">
table-responsive
</div>
</th>
</tr>
</table>
<table class="bg-success " style="width:300px; height:200px;">
<tr>
<th scope="row">
<div class="text-left">
no table-responsive
</div>
</th>
</tr>
</table>
837
Since Bootstrap 4 . row is now display:flex you can simply use align-self-center on any column to vertically center it... or, use align-items-center on the entire . row to vertically center align all col-* in the row...
In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.
In Bootstrap 5, if we want to vertically align an <div> element in the middle of a containing element, we can do this by applying the class align-items-center and d-flex on the containing element of that div. Here, the d-flex class has the same effect as that of the display: flex; property in CSS.
To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
You have to add the .table-responsive class to a container element, not the table itself.
Docs
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="bg-danger" style="width:300px; height:200px;">
<tr>
<th scope="row">
<div class="text-left">
table-responsive
</div>
</th>
</tr>
</table>
</div>
<table class="bg-success " style="width:300px; height:200px;">
<tr>
<th scope="row">
<div class="text-left">
no table-responsive
</div>
</th>
</tr>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
