hi so this is the code
<div id='mai'>
<div class="jumbotron">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/2.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">pre</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">nx</span>
</a>
</div>
</div>
</div>
</div>
<h3>Example heading <span class="label label-default">New</span></h3>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/4.jpg" alt="..">
<div class="caption">
<h3>برنده لوح تقدیر</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
i tried to change the height and width with class mai , but it wont change my carousel div height and it will broke my thumbnails and brings them upward towards the main carousel ...
what should i do ????
Related
I'm having trouble getting the spacing correct.
I need to have my carousel and cards the exact way as shown on the picture
However I can't get it, wether I'm using padding margin on bootstrap columns I just can't seem to get it.
col-9 seems to be fine for the carousel length wise but then I can't get the adequate spacing between the cards using offset (offset-1 makes the spacing way off)
Code
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="row justify-content-center">
<div class="card col-10">
<div class="card-header card-head">
Specialiteiten deze week
</div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="img/blanco.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>```
You just need to make sure you're following the rules of the Bootstrap grid...
columns and only columns should be the immediate children of row
content goes inside columns
The code is breaking these rules. The row has been doubled up causing double negative margins around the carousel. Also, cards should be inside col and not the same div.
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="col-9">
<div class="card">
<div class="card-header card-head"> Specialiteiten deze week </div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
</div>
</div>
Demo
I'm having trouble with containing responsive images inside a carousel slide and currently the carousel is not able to slide to either the next or previous one. Any help is appreciated, thanks.
<h2 class="caption-2"> UI Snippets</h2>
<h2 class="description-2"> .</h2>
<div id="ui-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner" role="listbox" style="max-width:100%; max-height:630px !important;">
<div class="carousel-item active container-fluid">
<img class="design-1" src="UI-Designs/Day&Night.png" alt="Mock-Up">
</div>
<div class="carousel-item container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Hiking.jpg" alt="Mock-Up">
</div>
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Homescreen.jpg" alt="Mock-Up">
</div>
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Cycling.jpg" alt="Mock-Up">
</div>
</div>
</div>
<div class="carousel-item container-fluid">
<video width=100% controls>
<source src="Echo.mp4" type="video/mp4">
</video>
</div>
</div>
<a class="carousel-control-prev" href="#ui-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#ui-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>```
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I need to make Image Slider with two images per slide by using HTML and CSS alone.
What I have trying:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image1.jpg" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image2.jpg" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image3.jpg" alt="Image 3" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image4.jpg" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image5.jpg" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image6.jpg" alt="Image 6" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The above code Shows only 1 image per slide(1st Column) and Empty space in 2nd Column.
Expected Output:
I need two columns with two images. When I hit Next Control, next two images will appear. When I hit Previous Control, previous two images will appear. (All this done by HTML and CSS alone not JS or others.)
I hope you all understand!
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
you can do this
What I really want to achieve is that to put the background image to a specific height like I have one section which contains two divs I gave the section a background image
which is
background-image: linear-gradient(-207deg, #0EC573, #0093FF);
Now I want to achieve is the background image covers the whole of the Second div and some part of the first div
FULL CODE
<section class="company py-4" >
<div class="container">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
Use it (See JSFiddle:https://jsfiddle.net/Lfxja1e5/7/) :
background-size: 100% 70%;
background-repeat: no-repeat;
**If you want it in bottom use:
background-position: bottom;
.company{
background-image:linear-gradient(-207deg,#0EC573, #0093FF);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<section class="company py-4" >
<div class="container d1">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container d2">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
Anybody know why is the image inside first carousel not responsive?
And how to make it responsive like the second one (Normal Bootstrap version) below. First one was created using ng2-bootstrap
Here is the html I have:
<h1>ng2-bootstrap carousel</h1>
<carousel>
<slide>
<img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Descr1</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</slide>
<slide>
<img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Descr2.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</slide>
</carousel>
<h1>Normal Bootstrap carousel</h1>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<!-- Controls -->
<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>
For image response, Please add class img-responsive or add below code
display: block;
max-width: 100%;
height: auto;
Image treatment for responsive design:
Image scale down-up
img {
width: 100%;
height: auto;
}
Image scale down but no up
img {
max-width: 100%;
height: auto;
}
Background mantain proportion and scale by one axis
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('img.jpg');
Background deforms but adapt to container
width: 100%;
height: 400px;
background-image: url('img.jpg');
background-size: cover;
Turns out, bootstrap hierarchy gets broken with ng2's tags in-between. adding img-responsive class to the <img ..> resolved the issue.
Only For the sake of completeness:
<h1>ng2-bootstrap carousel</h1>
<carousel>
<slide>
<img class="first-slide" src="http://placehold.it/800x400" alt="First slide" class="center-block img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Descr1</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</slide>
<slide>
<img class="second-slide" src="http://placehold.it/800x400" alt="Second slide" class="center-block img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Descr2.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</slide>
</carousel>