How to align these 3 div with more margin?
i tried col-3, but still doesn't work for me, i want 1 div to be in left, 2nd in center, and 3rd in right. i tried using css for margin, but it's worse in responsive. do i need to do responsive part to?
Check this image, i want to make this..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Announcement</title>
</head>
<body>
<section class="activities">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
</body>
</html>
Move the col-12 header part outside of what is now your row and change row to be a flex column. BS4 supports flex and it's the best way to go for this use case.
Here's a fiddle
<section class="activities">
<div class="container">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
</div>
<div class="d-flex justify-content-between">
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
You need to include Bootstrap css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Announcement</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="activities">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for
october 2019</h3>
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
</body>
</html>
try this I hope this will work :)
Related
I am creating this web portfolio for my web design class with Bootstrap 5. I was able to get my elements to respond correctly for desktop, tablet, and mobile device break points except for the "View More" button on lg screen breakpoint; I simply want to place the same style button underneath the "I'm Nate Finn. Graphic Des...." photo in my desktop version without messing up the order of my photos or sending it down below in which it looks like a footer element. (It currently sits above the footer and looks a bit silly).
I know my columns count is messed up and there is some issue with divs but I cannot figure it out without rearranging everything! I have attached screenshots that included the empty space where I want to center the button:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->
You could use flexbox on the column, but a simple div wrapper with some top padding works fine to wrap the button below the image.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<div class="mt-3">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
</div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->
I am trying to stretched link for my nested div but it is including even parent. I need only listItem to be clickable but this makes entire card div clickable.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p><span class="badge bg-secondary text-light" style="font-size: large;">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Per the Bootstrap docs (and the fundamental rules of absolute positioning), stretched links apply to the nearest element with non-static positioning. You can put the position-relative class on the parent to make that so.
I've also replaced your inline font size styles with the lead class on the parent paragraph. Just don't use inline styles, especially when your style library provides typography classes for that.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem position-relative">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p class="lead"><span class="badge bg-secondary text-light">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello I was making a website for a friend and for some reason when you run it doesn't show space in between it. If you run it in HTML it shows a space but if you go to the website he published it doesn't show that. The website he published it on is: https://xploit.gq/ . Does anyone have a fix for this?
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v5.1.4, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo5.png" type="image/x-icon">
<meta name="description" content="">
<title>Home</title>
<link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="header19 cid-scBqiokqjK mbr-fullscreen" id="header19-0">
<div class="container">
<div class="media-container">
<div class="col-md-12 align-center">
<h1 class="mbr-section-title mbr-white mbr-bold mbr-fonts-style mb-3 display-1">Xploits</h1>
<p class="mbr-text mbr-white mbr-fonts-style display-7">Roblox exploits at its finest.</p>
<div class="mbr-section-btn align-center"><a class="btn btn-primary display-4" href="#bottom">Learn More</a></div>
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-code mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7">Coded precisely </h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>It's free!</strong></h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-key mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>No key system</strong></h4>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-wrapper">
<div class="card-box align-center">
<span class="mbr-iconfont mobi-mbri-setting-3 mobi-mbri"></span>
<h4 class="card-title align-center mbr-black mbr-fonts-style display-7"><strong>Customizable </strong></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery3 cid-scF2ip4wCo" id="gallery3-4">
<div class="container-fluid">
<div class="mbr-section-head">
<h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Full-Width Gallery</strong>
</h4>
<h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-5">Images with Title and Text</h5>
</div>
<div class="row mt-4">
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features1.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features2.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features3.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features4.jpg" alt="" title="">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;">
<p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Mobirise site software - Check this</p>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script> <script src="assets/popper/popper.min.js"></script> <script src="assets/tether/tether.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/vimeoplayer/jquery.mb.vimeo_player.js"></script> <script src="assets/theme/js/script.js"></script>
</body>
</html>
All you need to do is add some padding-top like so:
<section class="gallery3 cid-scF2ip4wCo" style="padding-top:10em" id="gallery3-4">
<div class="container-fluid">
<div class="mbr-section-head">
<h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
<strong>Full-Width Gallery</strong></h4>
<h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-5">Images with Title and Text</h5>
</div>
<div class="row mt-4">
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features1.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features2.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features3.jpg">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
<div class="item features-image сol-12 col-md-6 col-lg-3">
<div class="item-wrapper">
<div class="item-img">
<img src="assets/images/features4.jpg" alt="" title="">
</div>
<div class="item-content">
<h5 class="item-title mbr-fonts-style display-7">
<strong>Card Title</strong>
</h5>
<p class="mbr-text mbr-fonts-style mt-3 display-7">
Card Text. You don't have to code to create a site with Mobirise Builder. Read more..</p>
</div>
</div>
</div>
</div>
</div>
</section>
On the website, it produces the following result:
I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>
Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png
Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</div>
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>