I am trying to make a carousel for website with bootstrap.I want to set the size of the bootstrap carusel.I have 3 Images and i want to make the size of the slider to be width: 100% and height:150px.
Here is the html code only for slider:
<section id="slider">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="slider_area">
<!-- Start super slider -->
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/slider/2.jpg" alt="img" >
<div class="slider_caption">
<h2>Largest & Beautiful University</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<a class="slider_btn" href="#">Know More</a>
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next"></a>
<a href="#" class="prev"></a>
</nav>
</div>
</div>
</div>
</div>
</section>
The css for this HTML is
#slider{
float: left;
display: inline;
width: 100%;
}
.slider_area {
background-color: #ccc;
display: inline;
float: left;
margin-top: 80px;
width: 100%;
}
.slider_caption {
left: 5%;
position: absolute;
top: 25%;
width: 50%;
}
.slider_right_caption{
left: 38%;
}
.slider_caption h2 {
color: #fff;
font-size: 33px;
background-color: rgba(49, 59, 61, 0.6);
padding: 8px;
margin-bottom: 5px;
text-transform: uppercase;
}
.slider_caption p {
background-color: rgba(49, 59, 61, 0.6);
color: #fff;
font-family: "Varela",sans-serif;
font-size: 15px;
font-weight: 600;
padding: 10px;
}
.slider_btn {
background: rgba(49, 59, 61, 0.6);
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
font-size: 16px;
display: inline-block;
font-family: "Varela",sans-serif;
margin-top: 10px;
padding: 9px 15px;
text-decoration: none;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.slider_btn:hover,.slider_btn:focus{
text-decoration: none;
outline: none;
}
.next,.prev{
display: none !important;
}
.slider_area:hover .next{
display: block !important;
}
.slider_area:hover .prev{
display: block !important;
}
I have tried making the following changes to the CSS but No effect.
.slider_area > slides-container > img, .slider_area > slides-container > a > img {
height: 100px;
width: 100%;
}
The slider area shrinks to the given height and the content goes behind the slider. But Slider size does not change at all.
Please Guide.
If I understood correctly, you want slider to take full width and push other content below or top but not on the sides. First thing I would try is to make slider display as block element.
Currently you do not have Slider as block element and but as inline element. More about this here: https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements
You should give it a read, a very helpful when you understand what Block and non block display do and how it behaves.
In your css you have following code, I propose you change it to block and also remove float if possible i.e. no float rule or float:none if needed for some other style elements.
Becomes