Here is my code:
I've tried change container class to container-fluid also resize the page.
<div class="container">
<div class="row">
<!--Product: banana split-->
<div class="col">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
<div class="card-block">
<h4 class="card-title">Banana Split</h4>
<p class="card-text">Price: 5$</p>
<i class="fas fa-shopping-cart"></i> Add to Cart
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
<div class="card-block">
<h4 class="card-title">Doce Natalino</h4>
<p class="card-text">Price: 2$</p>
<i class="fas fa-shopping-cart"></i> Add to Cart
</div>
</div>
</div>
</div>
</div>
The problem is the second col is not being placed side by side. It's being placed below each other.
I looked up on the console and there's not any warning.
Others stuff like bootstrap buttons is working fine.
You forgot to set your column classes depending on screen sizes you are viewing. This way, making 2 columns on mediums screen sizes, and on column in small screens using col-md-6 col-sm-12
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<!--Product: banana split-->
<div class="col-md-6 col-sm-12">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
<div class="card-block">
<h4 class="card-title">Banana Split</h4>
<p class="card-text">Price: 5$</p>
<i class="fas fa-shopping-cart"></i> Add to Cart
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
<div class="card-block">
<h4 class="card-title">Doce Natalino</h4>
<p class="card-text">Price: 2$</p>
<i class="fas fa-shopping-cart"></i> Add to Cart
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/
I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.
Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
<section class="portfolio">
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
You are creating a new row for every item
Instead, put the col's in one row:
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
</div>
Also make sure that you wrap your height and width values with "" too.
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.
I'm a student. And I have used Bootstrap 3.3.7 and after moved to v4.1. In this version, columns are not floating automatically to right. So I used d-inline-block class. I created 4 blocks with 3 of columns for each. The number of columns in a row is equal to 12. Then the last column jumps to the new line instead of wrap to the previous column. But this code works fine with Bootstrap 3.3.7. Also, I used 2 columns just for one block, and when the number of columns is smaller than 12, there is no problem. I couldn't find any proper solution on google. Please help. Thank you.
Example:
https://jsfiddle.net/EshanRajapakshe/3aeaeohb/
My code is:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="col-lg-12 col-md-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 d-inline-block">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
Wrap your .cols inside a .row like this
<div class="row">
<div class="col-lg-6">6 cols</div>
<div class="col-lg-6">6 cols</div>
</div>
Also remove the d-inline-block class from cols.
In your particular case:
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
</div>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="template-img">
<img class="img-fluid" src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
<div class="template-info">
<div class="template-name-type">
<h6 class="template-name">Web Design Inspiration</h6>
<h6 class="template-type">HTML5 Template</h6>
<h6 class="template-more-details">MORE DETAILS</h6>
</div>
<div class="template-price-type">
<h5 class="template-price">$78</h5>
<div class="template-type-icons">
<img src="assets/images/icons/responsive-devices.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Responsive Website">
<img src="assets/images/icons/bootstrap.png" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Bootstrap 4 Template">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Also added the class img-fluid to imgs so it won't be bigger than its container.
Bootstrap-v4 Grid system Docs
Here is the updated fiddle link
I edited ur html, removed un necessary classes.
Also if u want all columns to be of same size on all devices, u only need one col-{number} class
Also there is no col-xs-{class} in bootstrap 4. Instead of that, use col-{number}
<section class="popular-templates-section">
<div class="container-fluid">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row m-0">
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-3 black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
You are facing issues basically because of the improper semantics of Bootstrap grid used by you. Find below the corrected code, it will help for sure.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Akash Kumar">
<meta name="url" content="http://akashshivanand.com">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.blue {
padding: 5px;
background: blue;
}
.black {
padding: 5px;
background: black;
}
</style>
<title> by EshanRajapakshe</title>
</head>
<body>
<section class="popular-templates-section">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="popular-templates-title">
<h4>Most Popular Templates</h4>
</div>
<div class="popular-templates">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block blue">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 d-inline-block black">
<div class="template-img">
<img src="assets/images/template-thumb/template-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>