Does someone know how to remove this white space?
This only occurs when I'm in mobile view.
Image of the problem. Untitled:
I tried using responsive instead of fluid but that doesn't solve the problem completely, the image is just scaled up.
HTML code of these boxes
<div class="row no-gutters">
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
<br>
<p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
<p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
</div>
<div class="col-6">
<img src="assets/img/slikablok2.jpg" class="img-fluid">
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<img src="assets/img/slikablok3.jpg" class="img-fluid">
</div>
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
<br>
<p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire
parkom površine od čak 1,4 hektara.</p>
<p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
</div>
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
<br>
<p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
<p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
</div>
<div class="col-6">
<img src="assets/img/slikablok4.jpg" class="img-fluid">
</div>
</div>
replace your class img-fluid for w-100 h-100 and object-fit: cover in css
img {
object-fit: cover
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="mb-0 text-white">Za miran život bez stresa!</h2>
<br>
<p class="mb-0 text-white-50">321 GARAŽNO MESTO</p>
<p class="mb-0 text-white-50">+ priključci za električni automobil, auto-perionica u garaži.</p>
</div>
<div class="col-6">
<img src="https://picsum.photos/200/300?random=1" class="w-100 h-100">
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<img src="https://picsum.photos/200/300?random=2" class="w-100 h-100">
</div>
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="text-white"> SPOJITE SE SA PRIRODOM! </h2>
<br>
<p class="mb-0 text-white">Naša inspiracija – Gorica, simbol je magičnog lijepog parka koji se prostire parkom površine od čak 1,4 hektara.</p>
<p class="mb-0 text-white">Njime poručujemo da se spojite sa prirodom, procvetate i napredujete.</p>
</div>
<div class="col-6 d-flex align-items-center flex-column justify-content-center bg-dark">
<h2 class="mb-0 text-white">Za sve vremenske prilike i potpuno uživanje.</h2>
<br>
<p class="mb-0 text-white-50">GRIJANJE I HLAĐENJE</p>
<p class="mb-0 text-white-50">U stambenom dijlu objekta primenjen je sistem grijanja i hlađenja svih prostorija, najsavremenijom tehnologijom.</p>
</div>
<div class="col-6">
<img src="https://picsum.photos/200/300?random=3" class="w-100 h-100">
</div>
</div>
Related
I have code in my bootstrap 5 website like this
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
Its working fine and output like this in desktop:
But in Mobile doesn't have equal height and it's looking like:
Basically I want same height column as image in mobile device too but its not working. I am using bootstrap 5.2.
I have added code in codeplay for text.
Let me know if someone here can help me for solve the puzzle.
This can easily be accomplished by using the aspect ratio helper classes. Just apply .ratio.ratio-1x1 to the inner wrapper within the .col-md-6s.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100 ratio ratio-1x1"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3 ratio ratio-1x1">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
.col-md-6 img {height: 100%;}
.col-md-6 { text-align: center; height:500px; }
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>
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
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>