I got a carousal template from getbootstrap.com (bootstrap 4) however, I'm having trouble making the carousal responsive on mobile screens. On smaller screens the text gets cut up and the carousal indicator gets merged with the text, and it only displays two testimonials at a time. I tried to make the testimonials stack on top of each other on smaller screens by using col-sm-12 however its not working.
Css:
width: 100%;
height: 400px;
word-wrap: break-word;
overflow-wrap: break-word;
}
#carouselExampleIndicators .carousel-item .row{
height: 300px;
}
/* testimonial columns */
#carouselExampleIndicators .carousel-item .col{
width: 100%;
margin: 10px;
color: black;
}
/* styling arrows */
#carouselExampleIndicators .carousel-control-prev .fa-chevron-left{
font-size: 30px;
color: black;
}
#carouselExampleIndicators .carousel-control-next .fa-chevron-right{
font-size: 30px;
color: black;
}
/* styling slide indicators */
#carouselExampleIndicators .carousel-indicators li{
background-color: black;
}
/* styling quotations */
#carouselExampleIndicators .fa-solid.fa-quote-left{
font-size: 40px;
padding-bottom: 15px;
}
/* customer review */
#carouselExampleIndicators #testimonial-text{
font-size: 19px;
padding-bottom: 5px;
}
/* name */
#carouselExampleIndicators #testimonial-source .name{
font-size: 20px;
}
/* company */
#carouselExampleIndicators #testimonial-source .company{
font-size: 15px;
font-weight: 500;
color: var(--clr-signode-red);
}
HTML
<div class="container">
<!-- heading -->
<div class="featurette-heading">
<h5 class="sub-heading text-center">Testimonials</h5>
<h2 class="fw-normal lh-1 main-heading text-center">From Our Customers</h2>
</div>
<div class="d-flex justify-content-center">
<div class="divider-dash "></div>
</div>
<!-- end heading -->
</div>
<div class="container-fluid">
<!-- testimonials carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item active">
<div class="carousel-caption">
<div class="row">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Company Name</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIAL PAGE -->
<div class="carousel-item">
<div class="carousel-caption">
<div class="row align-items-center">
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
<!-- SINGLE TESTIMONIAL -->
<div class="col text-left">
<!-- quotation icon -->
<div class="d-flex justify-content-center" id="testimonial-icon">
<i class="fa-solid fa-quote-left"></i>
</div>
<!-- testimonial text -->
<div id="testimonial-text">
“When I want quality products, I always go to Signode. Their materials are excellent, their service is great, and their co-op students are the best in the industry.”
</div>
<br>
<div id="testimonial-source">
<div class="name"><b>— John Doe</b></div>
<div class="company">Signode Canada</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- carousel arrows -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What it looks like on XL screens
What it looks like on mobile
Related
I'm trying to use bootstrap carousel inside CSS flexbox.
My issue is that I made some mistakes in the HTML and the second slide of the carousel doesn't show up. I can use the next button to move from the first slide, but it doesn't display the second and stays blank.
Here's my code:
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street — is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<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.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance <3
Your carousel-item weren't nested correctly, so when the buttons were triggering the active class change it was applying it to an element that was nested in an element that was no longer visible. When you do these, make sure you check to ensure that your items are inside the carousel-inner or the primary carousel container in whatever framework you use and not inside of each other as you had them initially. If you watch it in the browser inspector, you can see the class change when you use the nav arrows
.news {
display: flex;
height: 600px;
width: 100%;
}
#flex-box-1 {
width: 50%;
height: 100%;
background-color: green;
}
#flex-box-2 {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta name="description" content="Unilab career acceleration project" /> -->
<title>UniLab</title>
<script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section class="news">
<div id="flex-box-1">
<div id="places">
<h2>WORLD NEWS</h2>
<hr>
<h2>Amazing places in America to visit.</h2>
<p>For some reason — this country, this city, this neighborhood, this particular street — is the place you are living a majority of your life in.</p>
<button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
</div>
</div>
<div id="flex-box-2" class="container">
<div id="news-header" class="column">
<div id='box-1'>
<h2>MORE NEWS</h2>
</div>
<div id='box-2'>
<div class="col-6 text-right">
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa-solid fa-angle-left"></i>
</a>
<a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa-solid fa-angle-right"></i>
</a>
</div>
</div>
</div>
<hr>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
<div class="carousel-item">
<div class="column">
<article class="card">
<h3 class="pink">TRAVEL</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
<article class="card">
<h3 class="pink">TECHNOLOGY</h3>
<h3 class="article-title">Article title</h3>
<p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
<i class="fa-regular fa-clock"></i>
<span>2 mins ago</span>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="./scripts.js"></script> -->
<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.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Hello the code below generates a Bootstrap page with some lorem text and a sidebar however when the size of the browser window gets smaller it appears at the bottom of the document not on the side and when on very small resolutions it becomes hidden which is intended how do I make it appear at the side when on medium resolutions?
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
in?
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
If you want to hide it on on small, remove the d-sm-block..
<nav class="col-lg-2 col-md-3 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
If you want to show it on the side on small, change the outer column breakpoints from col-md-* to col-sm-*..
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
...
</div>
</div>
<div class="container-fluid">
<div class="row">
...
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
https://codeply.com/p/WyZu1eBAfQ
Note: There is no -xs- infix in Bootstrap 4 or Bootstrap 5 so the col-xs-* classes are doing nothing. Also, jQuery is not needed for Bootstrap 5.
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
How can i disable left control when first item is active and same goes to right if last item is active then disable right control
i would appreciate if i get any suggestions, is there any alternative for this
Thanks
JsFiddle Here
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
You can do it using slid.bs.carousel bootstrap event
1. Show or Hide controls
jQuery("#quote-carousel").on('slid.bs.carousel', function () {
//Show or Hide left indicator
if($(this).find('li:first-child').hasClass('active')){
$(this).find('.left').hide();
}else{
$(this).find('.left').show();
}
//Show or Hide right indicator
if($(this).find('li:last').hasClass('active')){
$(this).find('.right').hide();
}else{
$(this).find('.right').show();
}
}).trigger('slid.bs.carousel');
2. For Disabling the controls
You can disable it using CSS pointer-events.
See here for complete code, https://jsfiddle.net/n4v63g3L/6/
I am looking to get a container containing a row and then a list-group-horizontal group of items and ensure that it fills the entire HTML page horizontally, and is centered. Currently, these group items bunch to the left and do not fill the page horizontally until the screen size is very narrow, rescaling to lower width when the page is reduced in width.
Currently the result of the code is the following:
I want category 1, 2 and 3 to fill the page, and adjust when more categories are added.
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/dropdown.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!-- This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
<li>
Logout
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-9">
<!--
<div class="row carousel-holder" style="padding-top:50px">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
-->
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<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"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<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>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.Here where you have <!--Start listings of auctions--> .col-md-9, change to .col-md-12
Update:
Add to .list-group-horizontal .list-group-item this:
width:33.3%;
text-align:center
Snippet
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
width:33.3%;
text-align:center
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!--This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-12">
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<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"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<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>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<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>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->