I have 4 cards that i need to add some spacing between all of them because it looks like they are one into another. I've tried with adding margin-left but it doesn't really work also I've tried to add the class ml-2 but if i do that it will place one card into another row which i also don't want that:(
Code:
<div class="container">
<h2>Test:</h2>
<div class="row">
<div class="col-sm-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-6">
<i class="material-icons"></i><span>15800</span>
</div>
<div class="col-md-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card ml-2" style="width: 20rem;">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://www.carmag.co.za/wp-content/uploads/2016/11/Golf10.jpg" alt="Card image cap">
<div class="card-body text-center">
<p class="card-text text-center" style="color:black">Dacia Logan</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-sm-6">
<i class="material-icons"></i><span>5800</span>
</div>
<div class="col-sm-6">
<i class="material-icons"></i><span>Bucuresti</span>
</div>
</div>
</li>
</ul>
<button href="#" class="btn btn-danger">Save</button>
</div>
</div>
</div>
</div>
Thanks!
Try to put padding on the card class:
padding: 10px;
You could use one of the Bootstrap spacing utilities.
https://getbootstrap.com/docs/4.1/utilities/spacing/
For example, place this div between two cards:
<div class="mt-3" />
Related
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>
I have 2 "contents" in their divs next to each other. 1) is a slim categorized link list with buttons loading the content on 2). When there is nothing loaded yet on 2) it shows you an overview of the same listed items in 1) with little more information as cards.
Now, after I am having so many buttons I need to show in 1), I made the list scroll-able and added jump-to buttons, so that the user doesn't have to scroll to the bottom to reach the last category of the list. Logically 2) is scroll-able as well, as this is the main content of the site, respectively showing the big cards as an overview.
How do I realize to have the jump-to buttons working for both scroll-able divs at once? And is there maybe a solution without js, since I have absolutely no idea about js coding?
The only thing I am getting to work is only one of both divs jump-to-able
Btw. I am using bootstrap 5.2 . But unfortunately I didn't find a solution to that problem in their docs either :/
I also tried the documented anchors via scrollspy without success ( https://getbootstrap.com/docs/5.2/components/scrollspy/#usage )
Thank you very much in advance for any help!
in CodePen
https://codepen.io/KeenaBiacym/pen/qBYaLVQ
The scroll list
<div id="content">
<div class="container p-5 pt-3">
<div class="gallery d-flex">
<v class="btncontainer gallery nav justify-content-end">
<div class="scrollbar stickynator gallery">
<div class="slidebtn_galtab active" id="tab0" data-bs-toggle="tab" data-bs-target="#tab0-pane" type="button" role="tab" aria-controls="tab0-pane" aria-selected="true">
Overview
</div>
<div class="text-center pt-4">
▼ Category2 ▼
</div>
<h3 class="pt-4 text-center content-title" id="content_cat1">Category1</h3>
<div class="slidebtn_galtab mt-3" id="tab1" data-bs-toggle="tab" data-bs-target="#tab1-pane" type="button" role="tab" aria-controls="tab1-pane" aria-selected="false" style="width:400px">
Title1
</div>
<div class="slidebtn_galtab mt-3" id="tab2" data-bs-toggle="tab" data-bs-target="#tab1-pane" type="button" role="tab" aria-controls="tab1-pane" aria-selected="false" style="width:400px">
Title2
</div>
<br><br><br><br>
<h3 class="pt-4 text-center content-title" id="content_cat2">Category2</h3>
<div class="slidebtn_galtab mt-3" id="tab3" data-bs-toggle="tab" data-bs-target="#tab1-pane" type="button" role="tab" aria-controls="tab1-pane" aria-selected="false" style="width:400px">
Title1
</div>
<div class="slidebtn_galtab mt-3" id="tab4" data-bs-toggle="tab" data-bs-target="#tab1-pane" type="button" role="tab" aria-controls="tab1-pane" aria-selected="false" style="width:400px">
Title2
</div>
<div class="text-center pt-4">
▲ Category1 ▲
</div>
</div>
Content
<div class="tab-content container" id="TabContent">
<!-- CONTENT 0 -->
<div class="tab-pane fade active show" id="tab0-pane" role="tabpanel" aria-labelledby="tab0" tabindex="0">
<div class="container" id="content_cat1"><h3 class="pb-3 text-center content-title">Category1</h3>
<div class="row row-cols-1 row-cols-md-3 g-4 allcards">
<div class="col" id="gallerytablink1">
<div class="card mozoom h-100">
<div class="card-img-top moopacity cardsoverview">
<img src="https://images.unsplash.com/photo-1665597652829-bf80107d7045?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYwOTgzNDI&ixlib=rb-1.2.1&q=80&w=400" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Title1</h5>
<p class="card-text">Subtitle1</p>
</div>
<div class="card-footer">
<small class="text-muted">img1desc</small>
</div>
</div>
</div>
<div class="col" id="gallerytablink2">
<div class="card mozoom h-100">
<div class="card-img-top moopacity cardsoverview">
<img src="https://images.unsplash.com/photo-1665597652829-bf80107d7045?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYwOTgzNDI&ixlib=rb-1.2.1&q=80&w=400" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Title2</h5>
<p class="card-text">Subtitle2</p>
</div>
<div class="card-footer">
<small class="text-muted">img2desc</small>
</div>
</div>
</div>
</div>
<div class="container" id="content_cat2"><h3 class="pb-3 text-center content-title">Category2</h3>
<div class="row row-cols-1 row-cols-md-3 g-4 allcards">
<div class="col" id="gallerytablink3">
<div class="card mozoom h-100">
<div class="card-img-top moopacity cardsoverview">
<img src="https://images.unsplash.com/photo-1665597652829-bf80107d7045?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYwOTgzNDI&ixlib=rb-1.2.1&q=80&w=400" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Title1</h5>
<p class="card-text">Subtitle1</p>
</div>
<div class="card-footer">
<small class="text-muted">img1desc</small>
</div>
</div>
</div>
<div class="col" id="gallerytablink4">
<div class="card mozoom h-100">
<div class="card-img-top moopacity cardsoverview">
<img src="https://images.unsplash.com/photo-1665597652829-bf80107d7045?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYwOTgzNDI&ixlib=rb-1.2.1&q=80&w=400" class="card-img-top">
</div>
<div class="card-body">
<h5 class="card-title">Title2</h5>
<p class="card-text">Subtitle2</p>
</div>
<div class="card-footer">
<small class="text-muted">img2desc</small>
</div>
</div>
</div>
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 write application in angular, using bootstrap. I want the last 2 cards to be in the middle, instead of to the left. Now it looks like one last card is missing. I want to correct it. How to do it?
html code:
<div class="container" style="padding-top:1.1cm">
<div class="card-columns">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>
add d-flex align-items-center justify-content-center to parent => card-columns div or you can add mx-auto to last div
<div class="container" style="padding-top:1.1cm">
<div class="card-columns d-flex align-items-center justify-content-center">
<div class="card text-center" [routerLink]="['/special/arrangements-salon']">
<div class="card-body">
<img [src]="salon" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">salon</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-study']">
<div class="card-body">
<img [src]="study" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">gabinet</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bedroom']">
<div class="card-body">
<img [src]="bedroom" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">sypialnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-kitchen']">
<div class="card-body">
<img [src]="kitchen" height="100" width="100"> <br><label>
<h5 style="padding-top:6mm">kuchnia
</h5>
</label>
</div>
</div>
<div class="card text-center" [routerLink]="['/special/arrangements-bathroom']">
<div class="card-body">
<img [src]="bathroom" height="100" width="100"><br><label>
<h5 style="padding-top:6mm">łazienka</h5>
</label>
</div>
</div>
</div>
</div>
Bootstrap card-columns uses CSS multi columns and for various reason it's not really possible to center items, or align rows differently.
Instead of using card-columns, use the grid (row > col-*), but you should note this won't give you a masonry layout or top-to-bottom ordering.
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach