When in mobile view, cards are not centring as expected.
I have tried using d-flex and justify-content-center as suggested in a previous answer to no avail.
I've noticed that adding mx-auto to each of the card classes sort of works and keeps them nicely centered, however, the gap between the cards is also removed using this method.
Please see my site here.
Looks fine in desktop view, but once in mobile view all the cards are pushed to the right, I can see that the cards are going over the margin-right defined in my main tag.
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<!--Cards-->
<div class="card-deck mx-auto">
<!--Games Card-->
<div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
<a href="#">
<img src="../img/games.png" class="card-img-top" alt="Games">
<div class="card-body">
<p class="card-text"><strong>Games</strong></p>
</div>
</a>
</div>
<!-- Consoles Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="##">
<img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
<div class="card-body">
<p class="card-text"><strong>Consoles</strong></p>
</div>
</a>
</div>
<!-- Getting Started Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="###">
<img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
<div class="card-body">
<p class="card-text"><strong>Getting Started</strong></p>
</div>
</a>
</div>
</div>
</main>
<!--JavaScript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm using Bootstrap 4, please help!
Please dont fixed the width for your card. use style="width: auto;" instead of style="width: 18rem;" this will solve your problem
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<!--Cards-->
<div class="card-deck mx-auto">
<!--Games Card-->
<div class="card text-center text-white bg-dark mb-3 d-flex" style="width: auto;">
<a href="#">
<img src="../img/games.png" class="card-img-top" alt="Games">
<div class="card-body">
<p class="card-text"><strong>Games</strong></p>
</div>
</a>
</div>
<!-- Consoles Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: auto;">
<a href="##">
<img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
<div class="card-body">
<p class="card-text"><strong>Consoles</strong></p>
</div>
</a>
</div>
<!-- Getting Started Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: auto;">
<a href="###">
<img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
<div class="card-body">
<p class="card-text"><strong>Getting Started</strong></p>
</div>
</a>
</div>
</div>
</main>
<!--JavaScript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
if you put the align-items-center class in card-deck parent div you can get center card.
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<!--Cards-->
<div class="card-deck mx-auto align-items-center">
<!--Games Card-->
<div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
<a href="#">
<img src="../img/games.png" class="card-img-top" alt="Games">
<div class="card-body">
<p class="card-text"><strong>Games</strong></p>
</div>
</a>
</div>
<!-- Consoles Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="##">
<img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
<div class="card-body">
<p class="card-text"><strong>Consoles</strong></p>
</div>
</a>
</div>
<!-- Getting Started Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="###">
<img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
<div class="card-body">
<p class="card-text"><strong>Getting Started</strong></p>
</div>
</a>
</div>
</div>
</main>
<!--JavaScript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
thank you
A really simple way is to add margin:0 auto; to the card-deck div!
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<!--Cards-->
<div class="card-deck" style="margin:0 auto">
<!--Games Card-->
<div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
<a href="#">
<img src="../img/games.png" class="card-img-top" alt="Games">
<div class="card-body">
<p class="card-text"><strong>Games</strong></p>
</div>
</a>
</div>
<!-- Consoles Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="##">
<img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
<div class="card-body">
<p class="card-text"><strong>Consoles</strong></p>
</div>
</a>
</div>
<!-- Getting Started Card-->
<div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
<a href="###">
<img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
<div class="card-body">
<p class="card-text"><strong>Getting Started</strong></p>
</div>
</a>
</div>
</div>
</main>
<!--JavaScript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
I am trying to do my very first own web app with Spring, Thymeleaf and everything seemed to be going well, however after I separated my html files in "templates" folder, since that is required to use thymeleaf, my bootstrap,JS,CSS and all my other resources stopped working.
I have my boostrap included with CDN with the css included in the header and JS,jQuery and popper included in the bottom of the body. I've tried moving the CDN links all in the header, removing my own js and css, however it didn't work.
You can review the html below:
<!doctype html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<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="../static/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>EventFinder</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand">eventfinder</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="#navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Organize an event</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Register</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="slides" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../static/images/music.jpg" class="d-block w-100" alt="Music events">
</div>
<div class="carousel-item">
<img src="../static/images/arts.jpg" class="d-block w-100" alt="Art events">
</div>
<div class="carousel-item">
<img src="../static/images/travel.jpg" class="d-block w-100" alt="Travel and outdoor events">
</div>
<div class="carousel-item">
<img src="../static/images/hobbies.jpg" class="d-block w-100" alt="Hobbies">
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Welcome to eventfinder.</h1>
</div>
<hr>
<div class="col-12">
<p class="lead">Here you can search, join and create all kind of events. Eventfinder is free of charge web app, where people with the same
interests can match and meet in real life.</p>
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row container-fluid padding">
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person1.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-sm-6 col-md-4">
<div class="img-area">
<img src="../static/images/person2.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
<div class="person_container col-12 col-md-4">
<div class="img-area">
<img src="../static/images/person3.jpg" class="img-thumbnail person_pic">
</div>
<p>Some text here</p>
</div>
</div>
<hr class="my-4">
</div>
<div class="my-div-body">
<div class="row container-fluid">
<div class="col">
Most recently added events
</div>
</div>
<div class="row recently-added-container container-fluid">
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
<div class="col">
TO ADD EVENT HERE
</div>
</div>
</div>
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Best cities to visit</h1>
</div>
<hr>
<div class="container-fluid padding">
<div class="row padding">
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="city-img-top" src=""/>
<div class="card-body">
<h4 class="card-title">City Name</h4>
<p class="card-text">Some text here</p>
See more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../static/js/app.js"></script>
</body>
</html>
Also you can check my project structure here:
Thank you in advance!
It's best to let thymeleaf handle paths for resources and not use relative ones.
For example set the folowing properties
spring:
web:
resources:
static-locations: classpath:/static/
chain:
strategy:
content:
enabled: true
paths: /resources/**
and then in the html do
<link rel="stylesheet" th:href="#{/css/style.css}"> and
<img th:src="#{/images/person3.jpg}" class="img-thumbnail person_pic">
This way you do not have to add an arbitrary amount of ../ to paths
In small screens, my responsive image gets smaller till it disappears, even tho I specified that I wanted the images to be on top of each other on small screens, hence my col-md-6 col-sm-12. Any idea what's wrong with my code ?
<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>
<div class="row">
<div class="col-md-12 d-flex">
<div class="media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
Go ahead and resize the screen here, knowing that I need to have the flex display.
https://jsfiddle.net/ero14xqf/
.col-* must always be contained inside .row...
<div class="row">
<div class="col-md-12 d-flex">
<div class="row media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
Following are my responsive html code with bootstrap design, if i add to CMS->Page->Content my cms page look like collapsed, header and footer alignment issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="font-size: larger;">
<h2>Kolupadi Manual</h2>
<p>All kind of Kolu Padi Manual list</p>
<h4 align="center"><u>3 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/3_regular_booklet_2017.pdf" class="card-text">3 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/3_trible_booklet_2017.pdf" class="card-text">3 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>5 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
5 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/5_regular_booklet_2017.pdf" class="card-text">5 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/5_triple_booklet_feb_2017.pdf" class="card-text">5 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>7 Steps Kolupadi</u></h4>
<div class="card-columns">
<div class="card bg-light">
<div class="card-body text-center">
7 Compact Kolu Padi
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/7_regular_booklet_2017.pdf" class="card-text">7 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/7_triple_booklet_feb_2017.pdf" class="card-text">7 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
<h4 align="center"><u>9 Steps Kolupadi</u></h4>
<div class="card-columns">
<!-- <div class="card bg-light">
<div class="card-body text-center">
3 Compact Kolu Padi
</div>
</div> -->
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/regular/9_regular_booklet_2017.pdf" class="card-text">9 Regular Kolupadi
</a>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<a href="https://abc.in/media/kolupadi-pdf/triple/9_triple_booklet_2017.pdf" class="card-text">9 Triple Kolu Padi
</a>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
If I directly add above code into CMS->Page->Content, header and footer alignment collapsed.
What is the proper way to add my design to my block?
I am using bootstrap card https://getbootstrap.com/docs/4.0/components/card/ to show a image,the problem is on bootstrap templete it just add a margin , I would like to make only the image to stay o full width of the div, if somebody have a solution it would be appreciated, thanks in advance.
<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>
<!-- card documentation https://getbootstrap.com/docs/4.0/components/card/ -->
<section >
<div class="card text-center">
<div class="card-header" style="background-color:white">
Card Header
<div class="card-body">
<center>
<!-- img I need full page size on card body -->
<div class="view overlay zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
</div> </center>
<p class="card-text">card description</p>
<div class="card-footer text-muted" style="background-color: white">card footer</div>
</section>
You can use bootstarp class p-0 to remove the padding from the card and w-100 on the image to take full width of 100%
See code snippet:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section>
<div class="card text-center p-0">
<div class="card-header" style="background-color:white">
Card Header
</div>
<div class="card-body p-0">
<div class="view overlay zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid w-100" alt="smaple image">
</div>
</div>
<p class="card-text">card description</p>
<div class="card-footer text-muted" style="background-color: white">card footer</div>
</div>
</section>
To make the image 100% width of the .card-body, it's as simple as adding .w-100 class to the image to make it 100% width all the time.
<div class="card text-center">
<div class="card-header" style="background-color:white">
Card Header
</div>
<div class="card-body">
<center>
<div class="view overlay zoom">
<img src="" class="img-fluid w-100" alt="smaple image">
</div>
</center>
<p class="card-text">card description</p>
<div class="card-footer text-muted" style="background-color: white">card footer</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/qh6o2gyz/3/
i'm new to bootstrap and i need some help to make this custom carousel.
The pictures above below will explain perfectly what i'm trying to make!
Thank you!
Desktop view
Mobile view
Here's my solution using JQuery. Make sure to update each image's src attribute to the appropriate value. I've included links to most of the important methods that were used at the bottom of this post.
<html>
<head>
<title>Custom Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CDNs -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// lg breakpoint that bootstrap defines is at 992px width
// Look at the Bootstrap Responsive Breakpoints page for more info
if($(window).width() <= 992)
// Look at JQuery Starts-With-Selector and Remove Documentation for more info
$("div[id^='3-slides-']").remove();
else
$("div[id^='slide-']").remove();
});
</script>
</head>
<body>
<div id="custom-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- First 3 slides -->
<div class="carousel-item active" id="3-slides-1">
<div class="container-fluid">
<!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item active" id="slide-1">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Second 3 slides -->
<div class="carousel-item" id="3-slides-2">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-4">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-5">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-6">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Third 3 slides -->
<div class="carousel-item" id="3-slides-3">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
<img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-7">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-8">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<div class="carousel-item" id="slide-9">
<div class="container-fluid">
<div class="row align-items-center">
<img class="col-12" src="https://via.placeholder.com/940x600"/>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#custom-carousel" 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="#custom-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
CodePen
This is not responsive.
If you resize the window to the size of a mobile view, the JQuery function won't be called; however, if the screen starts with a mobile size, the carousel will be appropriate.
If you need the carousel to be updated to the right view during resizing, I believe you can wrap a resize function on the window around the main JQuery function I've used.
e.g.,
$(window).resize(function() {
if( $(this).width() > width ) {
if($(window).width() <= 992)
...
else
...
}
Useful Links
Bootstrap Responsive Breakpoints
Bootstrap Carousel Documentation
Bootstrap Grid Documentation
JQuery Remove Documentation
JQuery Resize Documentation
JQuery Starts-With-Selector Documentation