I'm having difficult getting the headers of a table to center. The table HTML is below:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Photo</th>
<th>Description</th>
<th>Location</th>
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
<th class="text-right">Price</th>
<th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
</tr>
</thead>
<tbody id="lisc_recs"></tbody>
</table>
</div>
It's this particular column that is giving me heartburn:
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
I can get it to center normally using .text-center if there is no responsive display elements inside the , like:
<th class="text-center">Disposition</th>
Is there a way to center text inside the span when displayed using d--flex or d--table-cell?
The problem appears to be that the span is always generating itself at full width of the :
Centering content in flexbox elements requires either justify-content or align-items, not text-align.
Use Bootstrap's justify-content-center class.
More on that
Related
I'm trying to implement an ordered list with a collapsible part inside the li elements. The idea is to have some basic information about a given context and by clicking on the link you get further information. The code is working but the numbering (1.) is not vertical-align with the content (Click to collapse) and I don't know how it can implement that properly. I'm not a css guru, so maybe you can help me.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
You can make your list-group-item grid (add .d-grid, .grid-template) and make custom grid areas to place inner content to special cells, see Code Snippet CSS part.
Also for shorts in CSS, toggle-button can be wrapped to .grid-template-toggle class and collapse block class list can be extended by .grid-template-collapse.
.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content 1fr;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content auto;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I've seen multiple examples of how to center a bootstrap card but none of them fits my needs. I'm trying to center a bootstrap card vertical and horizontal so the card is placed exactly in the center of the screen. I want to achieve this by using only bootstrap classes like mx-auto etc. I've been trying for few hours but havent come to a solution yet, this is the code im working with:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
That results in this:
What I'm trying to get:
Hope someone can help me out and find the best solution to achieve this!
Thank you!
CSS:
.row{
height: 100vh;
}
HTML :
<div class="row d-flex justify-content-center align-items-center">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
I am using Bootstrap 4 with float-left and float-right classes that keep my 2 divs left and right of each other and works great, but I want the right div to be sticky as well, but this doesnt seem to work. I am using position-sticky on the div using float-right
Float class Reference here: Float URL
Sticky class Reference: Position URL
Essentially my HTML looks like this:
<section class="section">
<div class="float-left col-md-8">
<div class="row sameheight-container">
<div class="col-md-12">
#*Form fields, such as input, select etc.*#
</div>
</div>
</div>
<div class="float-right col-md-4 position-sticky">
<div class="row sameheight-container">
<div class="col-md-12">
<div class="card card-block sameheight-item">
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Please note that the first Div has a bunch of form controls, so I have removed that and just put a comment in there.
Is there a way of doing this?
Thanks for any help!
I'm using ng-repeat to create a table with schedule blocks, but some are smaller than tr height, and I need that all of them have the same heigh. In each td I have a modified md-checkbox:
Missing space
I'v created a codepen:
Schedule
<div id="main" ng-app="MyApp" layout>
<div ng-view layout="column" flex></div>
<script type="text/ng-template" id="template.html">
<md-toolbar class="" layout="row">
<center>toolbar</center>
</md-toolbar>
<md-content class="content" >
<table class="vistaTabla" cellspacing="0" cellpadding="0">
<tr ng-repeat="hora in bloques[0]">
<td class="vistaBloque" ng-repeat="bloque in hora">
<md-checkbox class=" text-longshadow md-whiteframe-1dp bloque dotted" >
{{bloque.materia}} {{bloque.nombre}}</td>
</md-checkbox>
</tr>
</table>
</md-content>
</script>
</div>
Solution for your problem is the block that is inside <td>.
<td> elements are always the size of their <tr> parents. The md-checkbox element is the one that is messing with you.
Define rule for element .md-whiteframe-1dp:
.md-whiteframe-1dp {
height: 100%;
}
My requirement is I have two links at left side and if I click on a link, respective page should get displayed on the right side.
how can make this arrangement using tags.
I tried as the below, but its not showing side by side. where as DisplayData gets appeared at the bottom of links. Thanks in advance..
<div id="accountstabs-1">
<div id="links" style="text-align:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
CSS:
#accountstabs-1>div {
float : left;
}
http://jsfiddle.net/T4E88/
You need to use floats instead of text-align to position elements. (text-align should only be used for text.)
Check out this JSFiddle example.
I updated your HTML like this:
<div id="accountstabs-1">
<div id="links" >
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" >
<table class="data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</div>
<div class="clr"></div>
</div>
Notice that I removed the two text-align inline styles from the divs, and added the new div near the bottom with class clr.
Then the CSS looks like this:
#links {
width: 50%;
float: left;
}
#DisplayData {
width: 50%;
float: right;
}
/* clearfix */
.clr { clear: both; }
The purpose of the "clearfix" is to make sure that any elements added after your right column get displayed underneath the columns properly.
You should put the styles in a separate CSS file, but the following should work;
<div id="accountstabs-1" style="width:400px">
<div id="links" style="display:block;float:left;width:200px">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="display:block;float:right;width:200px">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>
div is a block element and it take the whole place horizantly,
to place another div in parallel you need to use css property float left .
use style property style="float:left".
<div id="accountstabs-1">
<div id="links" style="text-align:left; float:left">
<li>Manage</li>
<li>Users</li>
</div>
<div id="DisplayData" style="text-align:right">
<table class="data">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
</tr>
</thead>
</table>
</div>
</div>