I am not able to customize left and right margin for bootstrap row inside card. Here are my css code and some screenshots.
<div class="container" style="margin-bottom: -20px;">
<div class="row">
<div class="col-6">
<div class="card shadow bg-white pt-1 pb-1 rounded">
<div class="row" id="xyz">
<div class="col-4">
<p><b>1,933</b></p>
</div>
<div class="col-4">
<p><b>₹100</b></p>
</div>
<div class="col-4" style="white-space:nowrap">
<p><b>₹4,000</b></p>
</div>
</div>
<div class="row">
<div class="col-6">
<img class="mx-auto d-block card-img" src="../../assets/images/note_9_pro_max1.jpg" alt="note-pro-max" style="width: 50px; height: 100px;">
</div>
<div class="col-6" style="white-space:nowrap">
<p><b>₹1,000</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
Add
pl-1 and pr-1 in card div and try...
<div class="card shadow bg-white pt-1 pb-1 pl-1 pr-1 rounded">
JSFIDDLE
A little bit late, but I found a working solution. You can set the "width" of the card to percentages.
<div class="card shadow bg-white pt-1 pb-1 rounded" style="width: 95% !important">
Related
This question already has answers here:
Bootstrap 4 Cards of same height in columns
(7 answers)
Closed 2 years ago.
First, I'm sorry if there is already an answer to this somewhere. If so, just point me in that direction. I've been looking for a while and can't seem to find an answer that works the way I need.
I am trying to get all of the bootstrap cards on my heroku page to be the same size. I had it set with the container surrounding the responsive divs as display flex and justify-content-center and align-items-center. I have also tried align-items-stretch but it still doesn't result in the cards all being the same height. I've also tried using the bootstrap height utility (h-100) on the responsive divs within the row. Also used css min-height but ran into problems as content would overflow the divs when resizing window.
This is what I currently have that ends up with different sized cards based on the content:
<div class='home-container m-5'>
<div class="row d-flex mb-5 justify-content-center align-items-center">
<div class="col-sm-6 col-lg-4">
<a href='./Multi-welders'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Multiprocess Welders</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<a href='./helmets'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Helmets</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4 h-100">
<a href='./gloves'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Gloves</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card m-3 bg-light">
<img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best MIG Welders</h2>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class='card m-3 bg-light'>
<img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best TIG Welders</h2>
</div>
</div>
</div>
<div class='col-sm-6 col-lg-4'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best Professional Welders</h2>
</div>
</div>
</div>
</div>
</div>
You can add the following css class:
.card {
height: 200px
}
This will give all your cards the same height. You can just change the height to whatever you like.
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>
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I'm looking to have the div with the red border to be the same height as its green counterpart on the right? This is in bootstrap 4!
Have tried display: flex and flex-grow, have also tried putting the border on the column (which makes the effect I'm looking for) but it then doesn't have the padding.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>
</div>
Here's a pen with the existing: https://codepen.io/Daggett/pen/OKJxPm
The columns are also responsive and need to stack at smaller breakpoints (hence the order-lg classes)
add d-flex to the column to use the default stretch behavior and have the same height. Also add w-100 to the element to keep it's default full width:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1 d-flex">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2 d-flex">
<div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>
</div>
Bootstrap 4 rows and col-elements already have an equal height through their flex design. You only have to set the height of your inner div to 100%, to make it fill its parent space.
You can use the Bootstrap 4 h-100 class for height:100%;.
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. <br> It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<div class="h-100 border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
</div>
I'm trying to create an image grid with that little space between columns equal to the image below:
The problem is that I can not make the right margin(red line), image below shows the problem:
JSfiddle: https://jsfiddle.net/castordida/0zy7qd5m/
<div class="container gridhome mt-5 mb-5 p-0">
<div class="row" style="height:469px;">
<div class="col-sm-8 h-100" style="background-color:#000;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-12 h-50 p-0">
<div class="h-100 ml-1 mt-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
<div class="row mt-1" style="height:234.5px;">
<div class="col-sm-4 h-100 p-0">
<div class="h-100" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
<div class="col-sm-4 h-100 p-0">
<div class="h-100 ml-1" style="background-color:#919191;">
<span class="categoria">test</span>
<h3>TESTE</h3>
</div>
</div>
</div>
</div>
Ok it's due to the fact there is a gab between your picture at right... But the fixed height doesn't mention it...
There are many ways to correct this...
First : https://jsfiddle.net/y0x7kpza/
Add an overflow:hidden to the first .row
Second: https://jsfiddle.net/d0a52xwk/
Reaffect the height of the two div on the right in taking care of the margin-top of these elements.
.h-50-bis{
height:calc(50% - 0.125rem);
}