This question already has answers here:
Bootstrap grid with fixed wrapper - Prevent columns from stacking up
(1 answer)
How to set bootstrap col for small display sizes? [duplicate]
(2 answers)
Closed 2 years ago.
This code is working fine on desktop view. All 4 cards are showing on same line. But I want two cards on same line on mobile screen but it is going bellow another card -
<div class="container p-3 my-3">
<h2 class="text-center">Friendship Quiz</h2>
<div id="quiz">
<p class="text-center lead" id="question">What is one thing/activity that makes you relax?</p>
<div class="row justify-content-center" >
<div class="col-sm-2 mb-3">
<div class="card text-center">
<div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acf6d014cc.jpg" alt="Card image" style="width: 120px;"></div>
<div class="card-body">
<span id="choice0"></span>
</div>
</div>
</div>
<div class="col-sm-2 mb-3">
<div class="card text-center">
<div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad13063a48.jpg" alt="Card image" style="width: 120px;"></div>
<div class="card-body">
<span id="choice1"></span>
</div>
</div>
</div>
<div class="col-sm-2 mb-3">
<div class="card text-center">
<div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad1857e9f8.jpg" alt="Card image" style="width: 120px;"></div>
<div class="card-body">
<span id="choice2"></span>
</div>
</div>
</div>
<div class="col-sm-2 mb-3">
<div class="card text-center">
<div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acfb4ef90f.jpg" alt="Card image" style="width: 120px;"></div>
<div class="card-body">
<span id="choice3"></span>
</div>
</div>
</div>
</div>
`
You can add this bootstrap class to each card. e.g col-xs-6 It means extra-small, which is for mobile version.
<div class="col-sm-2 col-xs-6 mb-3">
// rest of your code
</div>
Related
I am new to this so even the dumbest thing would be welcome.
Here there is ample padding as defined in bootstrap as padding-right and padding-left
When I make my display smaller one card goes below and there is no space between the two cards.
<div class="row">
<div class=" col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..." alt="...">
<div class="card-body">
<p class="card-text">We got some text here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">We have text here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">We have text here</p>
</div>
</div>
</div>
</div>
The HTML is pretty basic. The CSS code
.illustration-img{
padding: 0 5px 0;
}
You can add mb-3 class to col-lg-4 class tags. (mb-1...mb-5)
<div class=" col-lg-4 col-md-6 col-sm-12 mb-3 ">
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.
Hi I am using Bootstrap 4, I am working on a project here http://eatout.sanaalitech.com/products.php I am facing a very strange problem.I am using bootstrap grid and my columns overlaps on the first page load only on mobile view,on desktop it works fine, when I refresh the page it works fine on the mobile as well.
I have tried the following but still not working
1) .col-lg-3{ display:block; position:relative;}
2) I have tried enclosing every 4 products in a row instead of taking all of them in a single row like this
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
3) I have also completely deleted this and made it again with cards but they also overlap on the first load only on mobile view.
Problem appears on the first load only.
I have added image on first page load .
<div class="container" style="margin-top:5em;">
<div class="row ">
<div class="col-lg-12" >
<ul class="filter-tabs text-center">
<li data-filter=".maincourse"><a href="#!" >Main Courses</a></li>
<li data-filter=".desserts">Desserts</li>
<li class="active" data-filter="*">View All</li>
<li data-filter=".starters">Starters</li>
<li data-filter=".extras">Extras</li>
</ul>
<div class="projects">
<div class="row">
<div class="col-lg-3 item maincourse mb-3" >
<div class="product ">
<img src="Images/banner-image4.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3" >
<div class="product ">
<img src="Images/dessert.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-5.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item starters mb-3">
<div class="product ">
<img src="Images/banner-image3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-2.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Roll Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item starters mb-3">
<div class="product ">
<img src="Images/main-meal-4.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Vege Starter</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3">
<div class="product ">
<img src="Images/dessert-2.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Rasberry cake</h4>
<h7>£4.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Burger Meal</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item extras mb-3">
<div class="product">
<img src="Images/extras-1.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Macaroni Sallad</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-6.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Fish & Beans</h4>
<h7>£12.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item extras mb-3">
<div class="product ">
<img src="Images/extras-2.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Avacado Sallad</h4>
<h7>£9.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3">
<div class="product">
<img src="Images/dessert-3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Chocolate Cake</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When your grid overflows, run this in the console.
(Code from javascript.js at line 217)
var $projects = $(".projects");
$projects.isotope({
itemSelector: ".item",
layoutMode:'fitRows'
});
I think that this function runs before everything loads.
I don't know what is going on because sometimes this fixes the issue once called but most of the time it does not. But one is for sure. A function defines the absolute position, so the issue lays somewhere within the javascript source.
I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?
if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/
I have a row consisting of 8 cards.
I want to have all these in single line.
There is a margin of column size 2 on left side and I have set each card of size 1 (so 8 + 2 = 10)
But then, my row is all messed up.
Currently my code for border is
<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-lg-1 text-center">
<div class="card border-secondary mb-3" style="width: 10rem;">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
</img>
<div class="card-block">
<div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
</div>
</div>
</div>
</div>
I want the card to have this width (so not card to be small)..It can overflow on the right side of the screen..
How do i do this?
The problem has to do with your inline style of width:10rem. It's going to supersede the width of col-lg-1 when it is greater than that column width. Removing this inline style results in expected behavior.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
<div class="col-4 text-center">
<div class="card border-secondary mb-3" style="">
<img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}">
<div class="card-block">
<div class="card-body">
<p class="card-title text-center">
<small>{{rec["name"]}}</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
For the purposes of this example I've changed your column breakpoints to something that works better when you choose 'Run Code Snippet'. I suspect you were applying an inline width because col-lg-1 is too small; that being the case I recommend you consider a larger column breakpoint in lieu of inline styles overriding grid behavior.