I'm trying to make cards inline next to each other in columns but they keep jumping under each other. I can't figure out why that happens even when I set col-md-6 so two of them should align next to each other.
I've checked for any issues with my columns and if they are right. I've also tried setting different column sizes so they count 12. That didn't work as well. I also couldn't fix the container issue. I need to know what I've done wrong so I can fix it on my own next time. Thanks for any help.
<section id="jobs" class="py-5 bg-white">
<div class="container">
<div class="row">
<div class="col text-center">
<h1 class="display-3 text-uppercase text-black mb-0">pozice</h1>
<div class="underline-green bg-green"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
you have to put all column in the same row
<section id="jobs" class="py-5 bg-white">
<div class="container">
<div class="row">
<div class="col text-center">
<h1 class="display-3 text-uppercase text-black mb-0">pozice</h1>
<div class="underline-green bg-green"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
If you want to display your card inline. You should put it in a same row instead of putting each card in a row.
<div className="row">
<div className="col-md-6 col-lg-4 my-3">
<div className="card">
<img src="images/assistant.jpg" alt="assistant" className="card-img-top">
<div className="card-body">
<h4 className="card-title text-capitalize">asistentka</h4>
<p className="card-text">
<h5 className="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" className="btn btn-green mt-5">
<h6 className="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 my-3">
<div className="card">
<img src="images/developer.jpg" alt="developer" className="card-img-top">
<div className="card-body">
<h4 className="card-title text-capitalize">developer</h4>
<p className="card-text">
<h5 className="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" className="btn btn-green mt-5">
<h6 className="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 my-3">
<div className="card">
<img src="images/advertiser.jpg" alt="advertiser" className="card-img-top">
<div className="card-body">
<h4 className="card-title text-capitalize">obchodník</h4>
<p className="card-text">
<h5 className="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="" className="btn btn-green mt-5">
<h6 className="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</p>
</div>
</div>
</div>
</div>
Related
I don't have any experience with html, so I am using a free template for my website that uses fadeInUp to display images. When the page is first loaded one section overlaps the images on top of each other and even on top of a contact form at the bottom of the page. Shown here:
Overlapping Images
This persists until the page is reloaded, then it all works like it's supposed to. I've tried for days to find a solution, but with my extremely limited knowledge, it's hard to even know what to look for. Here is what it should look like and what it does look like once the page is reloaded:
Correct Layout
I'm hoping someone can help me figure out why this is happening. Happens in Safari, Chrome, and Edge and each time it is fixed when I reload.
Here is the code from the free template (modified by me to add descriptions and the correct images):
<!-- Projects Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="section-title text-center">
<h1 class="display-5 mb-5">Portfolio Samples</h1>
</div>
<div class="row g-4 portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.1s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/ShojiLamp.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/ShojiLamp.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Shoji Lamp</h4>
<p>Japanese inspired shoji lamp in walnut with maple panels. Castle joinery throughout.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.3s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/ChessBoard.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/ChessBoard.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">Custom Woodworking</p>
<h4 class="mb3">Chess Board</h4>
<p>Simple chessboard made from 19mm thick walnut with 4mm thick curly maple inlays. </p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.5s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/3dCuttingBoard.jpeg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/3dCuttingBoard.jpeg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Bella Cutting Board</h4>
<p>50mm thick end grain cutting board crafted in walnut and hard maple. Featuring a 3D effect.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.1s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/TableLamp.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/TableLamp.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale - 2 available</p>
<h4 class="mb3">Riley Table Lamp</h4>
<p>A tilted shade and bent body offers a twist on a tradional table lamp with the cord threaded through the body. Crafted in walnut.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.3s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/EntrywayTable.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/EntrywayTable.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Entryway Table</h4>
<p>A delicate live edge entryway table in spalted ash with walnut bowtie inlays. Cracks filled with black epoxy. Box joinery on the apron. </p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.5s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/GearShiftKnob.png" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/GearShiftKnob.png" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">Custom Woodworking</p>
<h4 class="mb3">Gear Shift Knob </h4>
<p>A custom gear shift knob commisioned in support of a loved one's fight with stomach cancer. Crafted in walnut with epoxy inlay.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Projects End -->
I'm trying to generate a component aligned in the middle, as follows:
<app-card titulo="Painel ao Vivo" [zeroPadding]="false" icon="fa-heartbeat fas">
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="justify-content-center">
<span class="text-sm text-black font-weight-bold mr-2">{{jogo.timeCasa.nome}}</span>
<app-avatar [titulo]="jogo.timeCasa.nome" [img]="jogo.timeCasa.logo"
class="avatar rounded-circle bg-primary mr-2"></app-avatar>
<button type="button" class="btn btn-primary btn-sm">0</button>
<button type="button" class="btn btn-primary btn-sm">0</button>
<app-avatar [titulo]="jogo.timeVisita.nome" [img]="jogo.timeVisita.logo"
class="avatar rounded-circle bg-primary mr-2"></app-avatar>
<span class="text-sm text-black font-weight-bold">{{jogo.timeVisita.nome}}</span>
</div>
</div>
</app-card>
app-card:
<div class="card">
<div class="card-header border-0" >
<h4 *ngIf="titulo" class="card-title"><i class="{{icon}}"></i> {{titulo}} </h4>
<ng-container *ngIf="header" [ngTemplateOutlet]="header"></ng-container>
</div>
<div class="card-body border-radius-bottom" [ngClass]="{'p-0': zeroPadding}">
<ng-content></ng-content>
</div>
</div>
How should it look: https://i.stack.imgur.com/NfuKw.png, how was it on the web: https://i.stack.imgur.com/cwKmq.png, how was it on the mobile: https://i.stack.imgur.com/RR6GP.png
I have a bootstrap card group with a title. Currently, the title is within a card, but I would like this to span over the card group. How can this be done?
<div class="card-group">
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
<div class="card-body">
<h1 class="card-text text-primary text-center">#ViewBag.ActiveProjects</h1>
<p class="card-title text-center font-weight-bold">Active Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-secondary text-center">#ViewBag.ArchivedProjects</h1>
<p class="card-title text-center font-weight-bold">Archived Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-warning text-center">3</h1>
<p class="card-title text-center font-weight-bold">Pending Dimensions</p>
</div>
</div>
<div class="card border-top-0">
<div class="card-header bg-white border-bottom-0 h5 font-weight-light"> </div>
<div class="card-body">
<h1 class="card-text text-success text-center">32</h1>
<p class="card-title text-center font-weight-bold">Estimates Available</p>
</div>
</div>
</div>
You can solve this by using Flex box. Wrap the .card-group div in a flex box div, and then move the title div outside the .card-group div.
Example
<div class="d-flex flex-column">
<div class="bg-white border-bottom-0 h5 font-weight-light">title</div>
<div class="card-group"><!-- cards here --></div>
</div>
When using display: flex; (.d-flex), the title div will align with the .card-group div.
Solution:
<div class="d-flex flex-column">
<div class="bg-white border-bottom-0 h5 font-weight-light">Project Status Overview</div>
<div class="card-group">
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-primary text-center">23</h1>
<p class="card-title text-center font-weight-bold">Active Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-secondary text-center">5</h1>
<p class="card-title text-center font-weight-bold">Archived Projects</p>
</div>
</div>
<div class="card border-right-0 border-top-0">
<div class="card-body">
<h1 class="card-text text-warning text-center">3</h1>
<p class="card-title text-center font-weight-bold">Pending Dimensions</p>
</div>
</div>
<div class="card border-top-0">
<div class="card-body">
<h1 class="card-text text-success text-center">32</h1>
<p class="card-title text-center font-weight-bold">Estimates Available</p>
</div>
</div>
</div>
</div>
Jsbin example here: https://jsbin.com/xeyiroyasa/edit?html,output
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have been working on this interface for few days using bootstrap4 and I cant get this one div to get a scrollbar without setting height in px's. Also a guide toward managing one page design?
Following is the link to the HTML code.
https://www.codeply.com/p/xm4bUOWFVh
To make an element within a flexbox state scrollable you can make a new container within the flexbox element and set to position: absolute;
Hopefully this helps. See my example below.
#chat-list {
position: relative;
overflow-y: scroll;
height: 100%;
}
.chat-scroll {
position: absolute;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container border bg-success w-100" style="height: 95vh;">
<div class="row h-100">
<div class="col-md-12">
<h3>My Whatsapp</h3>
</div>
<div class="col-12 col-sm-5 col-md-4 d-flex flex-column border " id="chat-list-area" style="position:relative; ">
<!-- Navbar -->
<div class="row d-flex flex-row align-items-center p-2 bg-warning " id="navbar">
<div class="text-white font-weight-bold">My Chats</div>
<div class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v text-white"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">New Group</a>
<a class="dropdown-item" href="#">Archived</a>
<a class="dropdown-item" href="#">Starred</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</div>
</div>
<!-- Chat List -->
<div class="row" id="chat-list">
<!-- new container -->
<div class="chat-scroll">
<!-- new container -->
<div class="col-xs-12 w-100 bg-light">
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom active" style="">
<div class="w-50">
<div class="name">Programmers</div>
<div class="small last-message">+91 98232 37261: yeah, i'm online</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">28/03/2018</div>
<div class="badge badge-success badge-pill small d-none" id="unread-count">2</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom">
<div class="w-50">
<div class="name">Dee</div>
<div class="small last-message"><i class="fas fa-check-circle mr-1"></i> if you go to the movie, then give me a call</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom unread" onclick="">
<div class="w-50">
<div class="name">Jimmy</div>
<div class="small last-message"> have you seen infinity war?</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
<div class="badge badge-success badge-pill small" id="unread-count">1</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick="">
<div class="w-50">
<div class="name">John</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> yup</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">27/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
<div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick=" ">
<div class="w-50">
<div class="name">Rob Mobile</div>
<div class="small last-message"><i class="far fa-check-circle mr-1"></i> i'm good too</div>
</div>
<div class="flex-grow-1 text-right">
<div class="small time">26/03/2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Profile Settings -->
</div>
<!-- Message Area -->
<div class="d-none d-sm-flex flex-column col-12 col-sm-7 col-md-8 p-0 " style="height: 95%;" id="message-area">
<!-- Navbar -->
<div class="row d-flex flex-row align-items-center p-2 m-0 w-100 border bg-primary" id="navbar">
<div class="d-block d-sm-none">
<i class="fas fa-arrow-left p-2 mr-2 text-white" style="font-size: 1.5rem; cursor: pointer;"></i>
</div>
<div class="d-flex flex-column">
<div class="text-white font-weight-bold" id="name">Programmers</div>
<div class="text-white small" id="details">You, Jimmy, Rob Mobile</div>
</div>
<div class="d-flex flex-row align-items-center ml-auto">
<i class="fas fa-search mx-3 text-white d-none d-md-block"></i>
<i class="fas fa-paperclip mx-3 text-white d-none d-md-block"></i>
<i class="fas fa-ellipsis-v mr-2 mx-sm-3 text-white"></i>
</div>
</div>
<!-- Messages -->
<div class="d-flex flex-column" id="messages" style="flex: 1!important;background: hsl(0, 0%, 80%);overflow: auto;">
<div class="mx-auto my-2 bg-primary text-white small py-1 px-2 rounded">
27/03/2018
</div>
<div class="align-self-start p-1 my-1 mx-3 rounded bg-white shadow-sm message-item">
<div class="options">
<i class="fas fa-angle-down text-muted px-2"></i>
</div>
<div class="small font-weight-bold text-primary">
+91 98232 63547
</div>
<div class="d-flex flex-row">
<div class="body m-1 mr-2">anyone online?</div>
<div class="time ml-auto small text-right flex-shrink-0 align-self-end text-muted" style="width:75px;">
18:20
</div>
</div>
</div>
<div class="mx-auto my-2 bg-primary text-white small py-1 px-2 rounded">
28/03/2018
</div>
<div class="align-self-start p-1 my-1 mx-3 rounded bg-white shadow-sm message-item">
<div class="options">
<i class="fas fa-angle-down text-muted px-2"></i>
</div>
<div class="small font-weight-bold text-primary">
+91 98232 37261
</div>
<div class="d-flex flex-row">
<div class="body m-1 mr-2">yeah, i'm online</div>
<div class="time ml-auto small text-right flex-shrink-0 align-self-end text-muted" style="width:75px;">
17:10
</div>
</div>
</div>
</div>
<!-- Input -->
<div class="justify-self-end align-items-center flex-row d-flex" id="input-area">
<i class="far fa-smile text-muted px-3" style="font-size:1.5rem;"></i>
<input type="text" name="message" id="input" placeholder="Type a message" class="flex-grow-1 border-0 px-3 py-2 my-3 rounded shadow-sm">
<i class="fas fa-paper-plane text-muted px-3" style="cursor:pointer;" onclick="sendMessage()"></i>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I wrote a code for card in Bootstrap 4. Now I would like to center all the text that is inside the card but I can't find a way on how to do this.
I tried to "text-center" the entire section. I've also tried to use "d-flex" with justifying the content for the entire row/container which didn't work either.
Here's my code :
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter py-4 bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="assistant.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>
.container-fluid-shorter{
max-width: 90rem;
}
What am I doing wrong? Thanks to anyone.
Is it something like this you are after? Using flex and then justify-content-center
.card-body {
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter py-4 bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/assistant.jpg" alt="assistant" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">asistentka</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
<a href="assistant.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card">
<img src="images/developer.jpg" alt="developer" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">developer</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Hledáme kolegu/kolegyni na pozici IT Developer (databáze, aplikace, API, webové služby, apod.)</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
<div class="card-body d-flex align-items-center justify-content-center">
<h4 class="card-title text-capitalize">obchodník</h4>
<p class="card-text">
<h5 class="text-grey font-weight-light pb-3 pt-1 text-center">Do naší firmy hledáme kolegu/kolegyni na pozici IT reklamy a obchodu.</h5>
<a href="employerform.html" class="btn btn-green mt-5">
<h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>