I am trying to make a carousel using Bootstrap, I was using an example but it uses the entire window and any further div's are not shown, how do I fix this so the div's can be shown correctly, please?
Whilst researching I came across this example but I can't figure out what they have done to fix this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="header_style.css" rel="stylesheet">
</head>
<body>
<!-- Carousel Start -->
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="licensed/p1.jpeg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Change The World With Humanity</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="licensed/p2.jpeg" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Save More Lifes With Our Helping Hand</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div">
<p>Test #1</p>
</div>
<div">
<p>Test #1</p>
</div>
<div">
<p>Test #1</p>
</div>
</body>
</html>
you can make it more responsive using height: 100vh which is equal to vh-100 in bootstrap. (add this class with the width class of before w-100)
and for making the image more responsive for all dimensions, just use object-fit: cover
now is responsive for mobile and pc
also solve the div error ❌<div"> -> ✅<div>
.carousel-item img {
height: 100vh; /* vh-100 class */
width: 100%; /* w-100 class */
object-fit: cover; /* make image not stretch */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" />
<link href="header_style.css" rel="stylesheet" />
</head>
<body>
<!-- Carousel Start -->
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/5000" alt="Image" />
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">
Let's Change The World With Humanity
</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">
Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div
class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2"
>
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/5000" alt="Image" />
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">
Let's Save More Lifes With Our Helping Hand
</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">
Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div
class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2"
>
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
</body>
</html>
Add width:100% and height for carousel-item
.carousel-item {
height: 500px;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid p-0 mb-5">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://via.placeholder.com/150" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Change The World With Humanity</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="https://via.placeholder.com/150" alt="Image">
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 pt-5">
<h1 class="display-4 text-white mb-3 animated slideInDown">Let's Save More Lifes With Our Helping Hand</h1>
<p class="fs-5 text-white-50 mb-5 animated slideInDown">Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
<a class="btn btn-primary py-2 px-3 animated slideInDown" href="">
Learn More
<div class="d-inline-flex btn-sm-square bg-white text-primary rounded-circle ms-2">
<i class="fa fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel End -->
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
<div>
<p>Test #1</p>
</div>
Related
My navbar doesn't seem to be changing color when scrolled. There's a bit of js I'm trying to implement (at the bottom of the following code block), but it doesn't seem to render and I have no idea why. I've made sure the bootstrap cdn is up-to-date. I've made sure my class references are accurate. Nothing seems to work.
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,600;0,800;1,300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<title> Museum of Candy </title>
</head>
<body>
<nav id="#mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 ps-2 fixed-top">
CANDY
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center d-none d-lg-block">
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="hand2.png" alt="">
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="milk.png" alt="">
</div>
<div class="col-md-6 text-center order-1">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae...</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae... </p>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="gumball.png" alt="">
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="sprinkles.png" alt="">
</div>
<div class="col-md-6 text-center order-1">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ist...</p>
</div>
</div>
</div>
</div>
</section>
<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://cdn.jsdelivr.net/npm/popper.js#1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- This is the JS section that's not working: -->
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
</html>
And, for what it's worth, here is my css:
.navbar.scrolled {
background: rgb(222,192,222);
transition: background 500ms;
}
I want the navbar background color to change when I scroll, but that doesn't seem to be happening.
Notice, you have a little mistake, you declared id and wrote #mainNavbar, just delete that #
id="mainNavbar"
Remove hash from nav id.
Check the image here.
https://prnt.sc/V-NkibDZCUYi
I have problems with center. I want to center icon and text on the same line with Bootstrap but its not working good. I am beginner here so I dont know much. Wanted this: Example https://i.stack.imgur.com/prSlD.png
My code what i have tried:
<section class="container-fluid bg-dark text-center">
<h2>WHY US</h2>
<div class="d-flex align-items-center">
<img class=" me-3" src="img/icon.png"style="width:40px" alt="">
<h5 class="mb-0">FAST DELIVERY </h5>
</div>
</section>
Try this , I think this will work
<section class='container-fluid text-center'>
<h2>WHY US</h2>
<div class='d-flex align-items-center w-100 justify-content-center'>
<img
class='me-3'
src='img/icon.png'
style='width:40px'
alt=''
/>
<h5 class='mb-0'>FAST DELIVERY </h5>
</div>
</section>
Try this one
<div class="container-fluid">
<div class="d-flex flex-column align-items-center">
<h2>WHY US ?</h2>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-circle-check"></i>
<h5 class="mb-0">Lorem ipsum dolor sit amet ,consectetur</h5>
</div>
</div>
I have use font awesome icon you can replace it with your image tag.Hope that work for you :)
How to align at the bottom a flex-row inside a card? I currently have two cards aligned side by side but when one of the texts is smaller than the other the divs that contain "(100)(100)" lose their alignment.
I'm aware of questions likes this one but I have tried their solutions and nothing worked.
Running example.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary"">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-0 ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
If you add d-flex flex-column in card-body div and mt-auto in bottom div, will solve your problem.
Full code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-01-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch">
<div class="card mb-4 shadow bg-white rounded">
<div class="card-body d-flex flex-column">
<div class="row pb-0">
<div class="col-9">
<strong class="mb-2 text-secondary">Name A</strong>
</div>
<div class="col-3">
<img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
</div>
</div>
<h3 class="card-title mb-0">
<a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
</h3>
<div class="mb-1 text-muted date">2020-02-01</div>
<p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<!-- This should be aligned to the bottom -->
<div class="d-flex flex-row mt-auto ml-0 pl-0 ">
<span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
<span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
<span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
<span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here are the elements that I want them to be combined into a swipeable carousel. Is there a way to do this? I just want them to turn into carousel only in mobile view.
Here is the HTML if needed. Thanks for help.
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
<div class="col launch">
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon1.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">First 7 Days Free</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon2.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">Fully Support</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
</div>
<div class="col star">
<div class="row-sm-3 row-md-4 fx">
<div class="row d-flex justify-content-center resim"><img src="css/img/Icon3.png" alt=""></div>
<div class="row d-flex justify-content-center baslik">Modern Flat Design</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
<div class="row-sm-3 row-md-4 fx" >
<div class="row d-flex justify-content-center resim" ><img src="css/img/Icon4.png" alt="" id="ozel"></div>
<div class="row d-flex justify-content-center baslik">User Friendly</div>
<div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
</div>
</div>
</div>
I guess the only opportunity is to have both code for your grid-like display (as shown above) and for your carousel like this:
<!-- Code of your grid view -->
<div id="gridView">
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
...
</div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2" data-ride="carousel">
...
</div>
Next use Bootstrap display property to properly show and hide the containers, e.g., d-md-none to hide on md and wider screens and d-none d-md-block to hide on screens smaller than md:
<!-- Code of your grid view -->
<div id="gridView" class="d-none d-md-block">
<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
...
</div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2 d-md-none" data-ride="carousel">
...
</div>
Since you are using d-flex, I put the extra <div id="gridView"> around it.
Here is an example of a Bootstrap carousel with captions:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can easily integrate your containers there and combine it with the above mentioned approach.
Good luck!
Can Anyone help making this list layout responsive for different screen-size, using media query? Currently, it is a fluid layout that is adjusting as per screen size. I need suggestion on using media query with it.
My original code is at https://jsfiddle.net/7qsp1k0o/2/
.item.list-group-item {
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item .list-group-image {
margin-right: 10px;
}
.item.list-group-item .thumbnail {
margin-bottom: 0px;
}
.item.list-group-item .caption {
padding: 9px 9px 0px 9px;
}
.item.list-group-item:before,
.item.list-group-item:after {
display: table;
content: " ";
}
.item.list-group-item img {
float: left;
}
.item.list-group-item:after {
clear: both;
}
.list-group-item-text {
margin: 0 0 11px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="products" class="row list-group ">
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit: Added desired result.
I want that text should not flow below the image, Rather the whole thing (image and box) should scale down to fit the screen size.
Styling is based on the creativity, however this might help you..
<div class="container">
<div class="row">
<!-- BEGIN PRODUCTS -->
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<!-- END PRODUCTS -->
</div>
</div>
And the css code
h4{
font-weight: 600;
}
p{
font-size: 12px;
margin-top: 5px;
}
.price{
font-size: 30px;
margin: 0 auto;
color: #333;
}
.right{
float:right;
border-bottom: 2px solid #4B8E4B;
}
.thumbnail{
opacity:0.70;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.thumbnail:hover{
opacity:1.00;
box-shadow: 0px 0px 10px #4bc6ff;
}
.line{
margin-bottom: 5px;
}
#media screen and (max-width: 770px) {
.right{
float:left;
width: 100%;
}
}