Good day, I'm using Font-awesome and bootstrap 4. Please check my Script first
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<span class="fa fa-building fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Company Profile</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-shopping-cart fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Shopping Cart</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-industry fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">Inventory Control</h3>
</div>
</div>
<div class="col">
<div class="row">
<span class="fa fa-users fa-5x text-center"> </span>
</div>
<div class="row">
<h3 class="text-center">User Management</h3>
</div>
</div>
</div>
</div>
with my script above i get this
as you can see, the fa icons is not at the center of text. How can i make the fa-icon in center ?
Add the text-center class to the div surrounding your icon instead of of the icon span like so:
<div class="row text-center">
<span class="fa fa-users fa-5x"> </span>
</div>
You can simplify your HTML markup to the below and the text under icons will be center aligned based on the class text-center assigned to parent col div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-3 text-center">
<span class="fa fa-building fa-5x"> </span>
<h3>Company Profile</h3>
</div>
<div class="col-md-3 text-center">
<span class="fa fa-shopping-cart fa-5x"> </span>
<h3>Shopping Cart</h3>
</div>
<div class="col-md-3 text-center">
<span class="fa fa-industry fa-5x"> </span>
<h3>Inventory Control</h3>
</div>
<div class="col-md-3 text-center">
<span class="fa fa-users fa-5x"> </span>
<h3>User Management</h3>
</div>
</div>
</div>
Simply add the "text-center" class to the "fa" element container:
from:
<div class="row">
<span class="fa fa-building fa-5x text-center"> </span>
to:
<div class="row text-center">
<span class="fa fa-building fa-5x text-center"> </span>
Simply you can add one custom class for making those icons to center align.
You can check this fiddle.
.icon-center{
margin:0 auto;
}
Related
I am trying to fit in the admin page this dashboard component. The content does not align correctly with the container (from the sidebar to the other end horizontally and from the navbar to the footer vertically). The issue I'm having is that I cannot fit it just right. The admin panel is made out of 3 components: admin page/sidebar/dashboard component.
The Dashboard content and how it aligns so far:
How can I align it correctly using Bootstrap 5?
Admin Page:
<template>
<div>
<sidebar></sidebar>
<div class="container">
<div class="row gutters-sm">
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-body tab-content">
<div class="tab-pane active">
<keep-alive>
<component :is="retrieveComponentMethod"></component>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Dashboard Component:
<template>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's sales amount</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ todaysell }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's income</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ income }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's due</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">$ {{ due }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's Expenses</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ expense }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Out of Stock Product</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</template>
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
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>
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>
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>
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>
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>
I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-4 mb-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header text-center">
<span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">4</span>
</div>
</div>
<div class="d-flex">
<div class="text-truncate mr-auto">
<span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
</div>
<div>
<span class="final-score">5</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
<div class="">Final</div>
</div>
<div class="card-footer text-center">
</div>
</div>
</div>
</div>
You could try the following (a part of the solution was retrieved from this answer):
.card {
height: 100%;
}
.card-body {
flex: 0 1 auto !important;
}
.card-footer.text-center {
flex: 1;
}
I have created a small fiddle showing the result:
I have a container with a row and inside that six portfolios items.
This code when used on a small screen I get the following result:
1st line : 2 images
2nd line : 1 image on the right side
3rd line : 2 images
4th line : 1 image on the left side
Anyone got a clue? Seems like a bug to me.
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img2.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img3.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img4.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.
You can use the background-image property instead of just using <img> on the <div>.
Solution:
.portfolio-thumb {
width: 300px;
height: 200px;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
Hope this helps!