Mike Flynn
Reputation: 24325
Bootstrap flex equal width columns without html table
Is there a way with this flex layout to get the scores to line up correctly without using a table? The highlighted parts should be lined up as above and below correctly, but since 9 has less length then 15, the columns look uneven. Is there away to accomplish this with flex outside of a table?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">1</span>
<span class="other-score font-weight-normal ml-2">14</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">9</span>
</div>
</div>
<div class="d-flex font-weight-bold">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span
style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">2</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">12</span>
<span class="other-score font-weight-normal ml-2">15</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class=""">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
</div>
</div>Upvotes: 2
Views: 985
Answers (4)
Arleigh Hix
Reputation: 10897
You can use the grid.
Make the card body a container then use rows and columns like you see in the snippet. I set the name column to .col-6 to take up half the width and the score columns to just .col to take up even amount of remaining space. I also gave the score columns .text-right and .text-monospace to ensure the the columns of numbers also line-up across the rows.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div>
<div class="d-flex text-truncate">
@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)
</div>
</div>
<div class="card-body container">
<div class="row">
<div class="col-6 text-truncate">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<span class="col text-right text-monospace final-score">1</span>
<span class="col text-right text-monospace other-score font-weight-normal">14</span>
<span class="col text-right text-monospace other-score font-weight-normal">25</span>
<span class="col text-right text-monospace other-score font-weight-normal">9</span>
</div>
<div class="row font-weight-bold">
<div class="col-6 text-truncate">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span style="display: none;">*</span>
</div>
<span class="col text-right text-monospace final-score">2</span>
<span class="col text-right text-monospace other-score font-weight-normal">25</span>
<span class="col text-right text-monospace other-score font-weight-normal">12</span>
<span class="col text-right text-monospace other-score font-weight-normal">15</span>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
</div>
</div>Upvotes: 0
Raeesh Alam
Reputation: 3480
Don't need to write custom css property if you are using Bootstrap-4 there is predefine classes for width like class w-50 means width: 50% and if you want transfer element to right side then use class justify-content-end in display flex.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
</div>
<div class="card-body">
<div class="d-flex">
<div class="w-50 text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<div class="w-50 d-flex justify-content-end">
<span class="final-score">1</span>
<span class="other-score font-weight-normal ml-2">14</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">9</span>
</div>
</div>
<div class="d-flex font-weight-bold">
<div class="w-50 text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span style="display: none;">*</span>
</div>
<div class="w-50 d-flex justify-content-end">
<span class="final-score">2</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">12</span>
<span class="other-score font-weight-normal ml-2">15</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Map</a>
</div>
</div>Upvotes: 0
Hema Ramasamy
Reputation: 726
as like Temani Afif advice you can use min-width for scores, and you can also use min-width for the whole div and use justify-content as space-evenly. But please note that if you are dynamic score, and the width is greater than the min-width it will not align evenly in this answer.
.score{
min-width:100px;
justify-content:space-evenly;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<div class="d-flex score">
<span class="final-score">1</span>
<span class="other-score font-weight-normal ml-2">14</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">9</span>
</div>
</div>
<div class="d-flex font-weight-bold">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span
style="display: none;">*</span>
</div>
<div class="d-flex score">
<span class="final-score">2</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">12</span>
<span class="other-score font-weight-normal ml-2">15</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class=""">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
</div>
</div>Upvotes: 0
Temani Afif
Reputation: 273649
give the score a min-width (or width) equal to two numbers
[class*="score"] {
min-width:2ch;
text-align:right;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">1</span>
<span class="other-score font-weight-normal ml-2">14</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">9</span>
</div>
</div>
<div class="d-flex font-weight-bold">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span
style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">2</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">12</span>
<span class="other-score font-weight-normal ml-2">15</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class=""">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
</div>
</div>Upvotes: 1
Related Questions
- Bootstrap 4.0 - Use flex columns
- Bootstrap 5 - flex colums, children elements full width and equal height
- 5 equal width columns in bootstrap (full width of container)
- Create equal table layout regardless of the data inside
- Responsive table and display flex (Bootstrap)
- How to get bootstrap 4 flex table that does not spread over 100% of the width of the page?
- Bootstrap 4 flex alignment of columns
- Bootstrap 3 flex box issue with columns
- Border on equal height columns with Bootstrap flex
- Bootstrap to have columns with same height