How to remove (CSS only) padding in last element on line?
If using with out "no-gutters": https://www.codeply.com/go/p5kwypnNAw
Is it possible to make pure css beauty grid?
<div class="container" style="background: yellow;">
<div class="row text-center text-lg-left no-gutters">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-2 mr-2 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
</div>
</div>
Example with no-gutters you can see there:
https://www.codeply.com/go/SM8kOTGbM5
Main container have yellow background, so you can see addition padding on last right elements.
Edit: The solution in your case is to replace all instances of the mr-2 class with mx-1.
mr-2 means: "margin-right 2 units". mx-1 means: "1 unit horizontal margin (on both sides)".
Here's the working code (click the "run code snippet" button below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container px-0" style="background: yellow;">
<div class="row text-center text-lg-left no-gutters">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="d-block mb-2 mx-1 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
</a>
</div>
</div>
</div>
<br><br><br><br>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
</div>
</div>
For Removing padding: Just try this class P*-0 (*- x,y,l,r)
x- Xaxis
y- yasis
l- Left
r - Right
For eg: am going to remove padding on right so
HTML:
<div class="pr-0">
----
----
----
</div>
or by css:
div:last-child {
padding-right:0px;
}
replace div with your respective class
Related
I'm trying to stack these picture vertically on a small screen. So one
column instead of two
I'm trying to stack these picture vertically on a small screen. So one
column instead of two:
Here is my code:
<div class="container">
<div class="row g-0">
<div class="col-6 col-ms-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit4.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-6 xl-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit6.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit2.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/lvr.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/gym.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Here is what I tried so far:
/* Please improve your content by showing what you tried so far */
e. G. Added "some" to "thing", Edited column count, I'm not that into HTML but you get what you could write here
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: class="col-12 col-sm-12 col-md-6"
I am new to Bootstrap. I am trying to add images as cards. But I face some issues as the cards are stacking up one after the other without spaces. Below is the code with Bootstrap4.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
With the above code in screen cards are stacked one after other without space.
I tried with mr-1 but the 4th card is wrapping it into another row.
How can I add spaces between cards with evenly spaced above and below?
This is because you are using .col-* and .card on the same element. Try to be in the habit of putting your content elements inside your layout grid elements.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
</div>
I solved this problem using Bootstrap 4 Emdeds Utilities
https://getbootstrap.com/docs/4.3/utilities/embed
In this case you just need to add you image to a div.embbed-responsive like this:
<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>
or .card-img-top {width: 100%;}
Objectives:
All cards have same height (128px) and width (128px)
If there are lot of cards
and the screen isn't wide enough, show cards on the second line.
I using Bootstrap 4, and currently, my cards are only on one line. I read the documentation and I tried a lot of code. Currently, I don't understand why my cards are too small and not respect the size of 128px.
The result is same a grid system responsive.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello</title>
</head>
<body class="text-center">
<div id='main-content' class="card-deck" style="margin: 50px 0 0 0">
<div class="card mb-4" style="max-width: 128px; max-width: 128px">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
<div class="card mb-4" style="width: 128px; height: 128px">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img-top">
</div><span></span>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Take your cards out of the card-deck and put them into a row. And if you want to center the whole thing horizontally, add the justify-content-center class to the row like so (click the "run code button" and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.card-custom {
max-width: 128px;
}
</style>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.netflix.com/fr/">
<img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
</a>
</div>
<div class="card card-custom mx-2 mb-3">
<a href="https://www.hulu.com">
<img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
</a>
</div>
</div>
</div>
Note that I've also added the classes mx-2 mb-3 for spacing.
I created a carousel modal for Bootstrap and can't figure out how to properly center it regardless of screensize or if for example a mobilescreen is tilted vertically.
The CSS Code I have right now properly spaces the modal on a normal pc screen, but it doesnt work on mobile screen and the MOdal appears on the top of the screen instead of appearing in the middle as it should. neither
position
nor
vertical-alignment
worked for me.
.modal {
vertical-align: middle;
padding-left: 5%;
padding-left: 5%;
padding-top: 1%;
text-align: middle;
max-height: 90vh;
max-width: 95vw;
}
.modal .carousel-inner {
max-height: 100% ! important;
position: center;
text-align: middle;
vertical-align: middle;
}
.modal .carousel .item #media (max-width: 991px) {
.modal {
padding-top: 55%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left" style="padding-bottom:3%;padding-left:0%">Gallerie</h1>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="" data-toggle="modal" data-target="#Gallerie">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
<div class="modal" id="Gallerie">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--/Gallerie-->
The modal needs the proper structure as detailed the Bootstrap 4 docs. Just use modal-dialog-centered and you don't need the extra CSS...
https://www.codeply.com/go/BDNba719xE
<div class="modal" id="Gallerie">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
I`m having problems with Bootstrap grid nesting in a project. I've created a div with a grid of 12 and a class with a background image.
After that, I created 3 other grids, one of 3 other with 8 and the last one with 1, for a total of 12. However, when I duplicate it, it doesn`t go to the next line as supposed to..
The link to see it is: https://www.neevasoft.com/test/saude.html
The code is here:
<article id="blog-list" class="blog-list article3 gradient-7">
<div class="container">
<div class="row">
<h2 class="title text-center">Saúde</h2>
<div class="item col-md-12 col-sm-12 col-xs-12">
<div class="item1 col-md-3 col-sm-3 col-xs-3">
<figure class="figure-wrapper">
<a href="interno.html">
<img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
</a>
</figure>
</div>
<div class="item2 col-md-8 col-sm-8 col-xs-8">
<figure class="figure-wrapper">
<a href="interno.html">
Espaço Corporal Eloiza Bovió
</a>
</figure>
</div>
<div class="item3 col-md-1 col-sm-1 col-xs-1">
<figure class="figure-wrapper">
<a href="interno.html">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</figure>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<figure class="figure-wrapper">
<a href="interno.html">
<img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
</a>
</figure>
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<figure class="figure-wrapper">
<a href="interno.html">
Espaço Corporal Eloiza Bovió
</a>
</figure>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<figure class="figure-wrapper">
<a href="interno.html">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</figure>
</div>
</div><!--//row-->
</div><!--//container-->
</article>
You should not be nesting col-* divs
Try using this:
<article id="blog-list" class="blog-list article3 gradient-7">
<div class="container">
<div class="row">
<h2 class="title text-center">Saúde</h2>
<div class="item1 col-md-3 col-sm-3 col-xs-3">
<figure class="figure-wrapper">
<a href="interno.html">
<img class="img-responsive" src="http://lorempixel.com/400/200/" alt="">
</a>
</figure>
</div>
<div class="item2 col-md-8 col-sm-8 col-xs-8">
<figure class="figure-wrapper">
<a href="interno.html">
Espaço Corporal Eloiza Bovió
</a>
</figure>
</div>
<div class="item3 col-md-1 col-sm-1 col-xs-1">
<figure class="figure-wrapper">
<a href="interno.html">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</figure>
</div>
</div><!--//row-->
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<figure class="figure-wrapper">
<a href="interno.html">
<img class="img-responsive" src="http://lorempixel.com/400/200/" alt="">
</a>
</figure>
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<figure class="figure-wrapper">
<a href="interno.html">
Espaço Corporal Eloiza Bovió
</a>
</figure>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<figure class="figure-wrapper">
<a href="interno.html">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</figure>
</div>
</div>
</div><!--//container-->
This is how I managed to fix it
<article id="blog-list" class="blog-list article3 gradient-7">
<div class="container">
<div class="row">
<h2 class="title text-center">Saúde</h2>
<div class="item col-xs-12">
<div class="col-xs-12">
<div class="item1 col-xs-3">
<figure class="figure-wrapper">
<img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
</figure>
</div>
<div class="item2 col-xs-8">
<figure class="figure-wrapper">
Espaço Corporal Eloiza Bovió
</figure>
</div>
<div class="item3 col-xs-1">
<figure class="figure-wrapper">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</figure>
</div>
</div>
<div class="col-xs-12">
<div class="item1 col-xs-3">
<figure class="figure-wrapper">
<img class="img-responsive2" src="assets/images/blog/blog-1.jpg" alt="">
</figure>
</div>
<div class="item2 col-xs-8">
<figure class="figure-wrapper">
Espaço Corporal Eloiza Bovió
</figure>
</div>
<div class="item3 col-xs-1">
<figure class="figure-wrapper">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</figure>
</div>
</div>
</div>
</div><!--//row-->
</div><!--//container-->