"Horizontal cards - Bootstrap 4"
Bootstrap 4.0.0 Snippet by mathematics

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container py-3">
<div class="title h1 text-center">Horizontal cards - Bootstrap 4</div>
<!-- Card Start -->
<div class="card">
<div class="row ">
<div class="col-md-7 px-3">
<div class="card-block px-6">
<h4 class="card-title">Horizontal Card with Carousel - Bootstrap 4 </h4>
<p class="card-text">
The Carousel code can be replaced with an img src, no problem. The added CSS brings shadow to the card and some adjustments to the prev/next buttons and the indicators is rounded now. As in Bootstrap 3
</p>
<p class="card-text">Made for usage, commonly searched for. Fork, like and use it. Just move the carousel div above the col containing the text for left alignment of images</p>
<br>
<a href="#" class="mt-auto btn btn-primary ">Read More</a>
</div>
</div>
<!-- Carousel start -->
<div class="col-md-5">
<div id="CarouselTest" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#CarouselTest" data-slide-to="0" class="active"></li>
<li data-target="#CarouselTest" data-slide-to="1"></li>
<li data-target="#CarouselTest" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="https://picsum.photos/450/300?image=1072" alt="">
</div>
<div class="carousel-item">
<img class="d-block" src="https://picsum.photos/450/300?image=855" alt="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background-color: #eee;
}
.title {
margin-bottom: 50px;
text-transform: uppercase;
}
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 5;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
margin-top:20px;
}
.carousel-indicators li {
border-radius: 12px;
width: 12px;
height: 12px;
background-color: #404040;
}
.carousel-indicators li {
border-radius: 12px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

can you please help me? horizontal cards-bootstrap. my carousel images don't slide even on pressing the navigation buttons

rajathk07 () - 4 years ago - Reply 0


can you please help me? horizontal cards-bootstrap. my carousel images don't slide even on pressing the navigation buttons

rajathk07 () - 4 years ago - Reply 0


do i need to write credit text for your design? Designed By ___

Penguincrab () - 5 years ago - Reply 0


thank u so much to your movie card design. That save my hours. Sorry for my English :D

Penguincrab () - 5 years ago - Reply 0