Bootstrap
Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Image Source
| What Will I Learn? |
|---|
| - We will be informed about the Bootstrap’s carousel feature. |
| - We will code our slide section appropriately to our design. |
| Requirements |
|---|
| - Brackets (Website) |
| - Intermediate code knowledge |
| - Basic HTML and CSS knowledge |
| Difficulty |
|---|
| - Intermediate |
Curriculum
Part 1: Bootstrap One-Page Web Design #Part1 [Turkish Tutorial]
Part 2: Bootstrap One-Page Web Design #Part2 [Turkish Tutorial]
Part 3: Bootstrap One-Page Web Design #Part3 [Turkish Tutorial]
Part 4: Bootstrap One-Page Web Design #Part4 [Turkish Tutorial]
Part 5: Bootstrap One-Page Web Design #Part5 [Turkish Tutorial]
Part 6: Bootstrap One-Page Web Design #Part6 [Turkish Tutorial]
Part 7: Bootstrap One-Page Web Design #Part7 [Turkish Tutorial]
Part 8: You are now here.
Tutorial Contents
In our previous lesson, we completely coded the cover section of our design. When we were coding our button in our cover section, we learned how to create buttons with predefined classes in Bootstrap, and how to get buttons with different looks with a few codes. We gave information about transitions and applied a soft transition effect to our navigation links in our project. We talked about the main differences between margin and padding. We completed our cover section by applying the hover effect to our navigation links. In this lesson we will continue with the main aim of our series. While coding our design as it is, we will make different additions at the same time. Thus, when we finish this lesson series, it will be a unique design. For example, before we start coding the Services section, let's make a small change to our design and add a slide section. The final version of our web page was:
Now let's add a slide section under the cover section. We go to Bootstrap's documentation page for this. In the links on the left we are looking at the Components >> Carousel path. Let's examine the page that opens. With Bootstrap's Carousel feature, we can easily add slides to our website.
In this way, we can add slides that only have image passes, but we can also add slides that can be controlled with buttons. To switch to the previous or next slide, we can use the buttons on the right and left.
If we want, we can also add the indicators to the carousel, alongside the controls, too. So we can easily switch to the photo we want, with using indicators.
We can also add captions for each picture we add. For this we can use the predefined classes of Bootstrap.
Now let's start coding our own slide. I'm using a free photo service that can be accessed via https://picography.co/. You can also use the photos you want. Create a new folder called "slide" in our images folder. Let's save six photos in 700x500 size to this folder.
Let's start coding. First, let's copy the codes as in the photo:
That's our code. We added a slide, consisting of three photographs, with previous and next buttons.
<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">
<div class="carousel-item active">
<img class="d-block w-100" src="..." 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" 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>
We will use "carouselExampleIndicators" id for carousel. If we want, we can assign a different value. Let's leave it like this for now.
Class carousel slide has been assigned. In this way we have indicated that the contents of the div are carousel.
We want the slide to start when the page is loaded with the data-ride =" carousel " feature.
The list starting with <ol> is:
The number varies depending on how many elements are in the carousel. It is the part that indicates which element is currently displayed. They are shown in bars on the bottom of the carousel.
A regular list is defined by <ol>. The carousel-indicators class is assigned.
The data-target property takes the id value of which carousel is being used.
The data-slide-to feature specifies which slides will be assigned to which bar in the section shown below.
Div with carousel-inner class:
Images or texts are specified in this section in the div element along with the carousel-inner class.
Each slide content is defined by the item class. It can be a text or a picture.
One of these slides must be defined with an active class. Otherwise the carousel will not appear on the page.
Controls section starting with tag <a>:
Allows the user to manually switch between slides.
The data-slide feature takes prev and next values to pass on the previous or next slide.
Adding text to pictures:
We said that we define the pictures with the item class. We can use the carousel-caption class for each of them.
We will add captions with these codes.
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
The same process can be applied for each element as in the example above.
Let's edit our codes. First we added six indicators because it is a slide composed of six photographs. We have described this in carousel-indicators class.
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
We then pointed to the source of our images and linked via "images/slide/slidex.jpg". Then we added captions to each photo. Our codes for the captions were given above. We used those codes. The final version of our codes is:
<section id="slide">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/slide/slide0.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non enim et enim feugiat fermentum eget vel ex. In gravida et lectus aliquam aliquet. Maecenas id eros molestie, pulvinar elit non, molestie justo. Mauris erat lectus, lobortis et elementum dictum, efficitur a lacus. Integer iaculis nulla eu aliquam ullamcorper. Quisque elementum maximus tincidunt. Donec tincidunt venenatis odio id rhoncus. Nulla facilisi.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide1.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p> Integer id faucibus justo. Phasellus ante ex, commodo at gravida in, volutpat id magna. Suspendisse nunc lectus, ultrices id ultrices at, iaculis eget orci. Sed nisi justo, scelerisque id tincidunt ut, porttitor id magna. Quisque lorem magna, imperdiet in neque non, pellentesque rutrum sapien. Nullam id ipsum sed tellus blandit aliquam.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Proin sit amet dapibus turpis. Vivamus porta et justo nec pharetra. Praesent vitae porta lacus. Proin ante sem, volutpat nec venenatis a, vestibulum non metus. Sed ornare tristique nisl quis tincidunt. Maecenas vulputate mauris et ex pharetra, vel elementum odio convallis.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide3.jpg" alt="Fourth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Quisque eleifend diam magna, sit amet pellentesque felis aliquam eu. Proin malesuada at elit et suscipit. Phasellus auctor id metus eleifend ullamcorper. Integer eleifend pharetra turpis vel ultrices.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide4.jpg" alt="Fifth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Aliquam erat massa, facilisis et eros a, auctor dapibus odio. Nam consequat nulla vel elementum vestibulum. Suspendisse ut sem elementum, blandit lorem a, dictum tortor. Proin mauris neque, tincidunt vitae dui quis, efficitur tincidunt felis. Fusce quis cursus tortor. </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide5.jpg" alt="Sixth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Duis blandit, tortor et laoreet fermentum, augue metus ullamcorper ligula, a semper massa sapien sit amet massa. Donec sem quam, fermentum vel quam nec, maximus condimentum turpis. Praesent eu viverra nulla, id consectetur felis. Aenean sed metus nisl. Donec nec enim placerat, interdum tellus pulvinar, tristique risus.</p>
</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>
Let's save our codes and check our page. I share a screenshot in Gif format.
Our slide was added but it seemed a bit big in size. Let's put our slide into the container and set the size.
Let's edit our codes like this.
<section id="slide">
<div class="container-slide">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/slide/slide0.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non enim et enim feugiat fermentum eget vel ex. In gravida et lectus aliquam aliquet. Maecenas id eros molestie, pulvinar elit non, molestie justo. Mauris erat lectus, lobortis et elementum dictum, efficitur a lacus. Integer iaculis nulla eu aliquam ullamcorper. Quisque elementum maximus tincidunt. Donec tincidunt venenatis odio id rhoncus. Nulla facilisi.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide1.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p> Integer id faucibus justo. Phasellus ante ex, commodo at gravida in, volutpat id magna. Suspendisse nunc lectus, ultrices id ultrices at, iaculis eget orci. Sed nisi justo, scelerisque id tincidunt ut, porttitor id magna. Quisque lorem magna, imperdiet in neque non, pellentesque rutrum sapien. Nullam id ipsum sed tellus blandit aliquam.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Proin sit amet dapibus turpis. Vivamus porta et justo nec pharetra. Praesent vitae porta lacus. Proin ante sem, volutpat nec venenatis a, vestibulum non metus. Sed ornare tristique nisl quis tincidunt. Maecenas vulputate mauris et ex pharetra, vel elementum odio convallis.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide3.jpg" alt="Fourth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Quisque eleifend diam magna, sit amet pellentesque felis aliquam eu. Proin malesuada at elit et suscipit. Phasellus auctor id metus eleifend ullamcorper. Integer eleifend pharetra turpis vel ultrices.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide4.jpg" alt="Fifth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Aliquam erat massa, facilisis et eros a, auctor dapibus odio. Nam consequat nulla vel elementum vestibulum. Suspendisse ut sem elementum, blandit lorem a, dictum tortor. Proin mauris neque, tincidunt vitae dui quis, efficitur tincidunt felis. Fusce quis cursus tortor. </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slide/slide5.jpg" alt="Sixth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Duis blandit, tortor et laoreet fermentum, augue metus ullamcorper ligula, a semper massa sapien sit amet massa. Donec sem quam, fermentum vel quam nec, maximus condimentum turpis. Praesent eu viverra nulla, id consectetur felis. Aenean sed metus nisl. Donec nec enim placerat, interdum tellus pulvinar, tristique risus.</p>
</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>
</section>
Let's save our codes and check our page.
It's in a container like you see. There is white space on the edges. We want the blank to be black, not white so that we see our previous and next buttons clearly. We also want our slide to be in the middle of the page. Change this code to that.
<section id="slide">
<div class="container-slide">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="rounded mx-auto d-block" src="images/slide/slide0.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non enim et enim feugiat fermentum eget vel ex. In gravida et lectus aliquam aliquet. Maecenas id eros molestie, pulvinar elit non, molestie justo. Mauris erat lectus, lobortis et elementum dictum, efficitur a lacus. Integer iaculis nulla eu aliquam ullamcorper. Quisque elementum maximus tincidunt. Donec tincidunt venenatis odio id rhoncus. Nulla facilisi.</p>
</div>
</div>
<div class="carousel-item">
<img class="rounded mx-auto d-block" src="images/slide/slide1.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p> Integer id faucibus justo. Phasellus ante ex, commodo at gravida in, volutpat id magna. Suspendisse nunc lectus, ultrices id ultrices at, iaculis eget orci. Sed nisi justo, scelerisque id tincidunt ut, porttitor id magna. Quisque lorem magna, imperdiet in neque non, pellentesque rutrum sapien. Nullam id ipsum sed tellus blandit aliquam.</p>
</div>
</div>
<div class="carousel-item">
<img class="rounded mx-auto d-block" src="images/slide/slide2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Proin sit amet dapibus turpis. Vivamus porta et justo nec pharetra. Praesent vitae porta lacus. Proin ante sem, volutpat nec venenatis a, vestibulum non metus. Sed ornare tristique nisl quis tincidunt. Maecenas vulputate mauris et ex pharetra, vel elementum odio convallis.</p>
</div>
</div>
<div class="carousel-item">
<img class="rounded mx-auto d-block" src="images/slide/slide3.jpg" alt="Fourth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Quisque eleifend diam magna, sit amet pellentesque felis aliquam eu. Proin malesuada at elit et suscipit. Phasellus auctor id metus eleifend ullamcorper. Integer eleifend pharetra turpis vel ultrices.</p>
</div>
</div>
<div class="carousel-item">
<img class="rounded mx-auto d-block" src="images/slide/slide4.jpg" alt="Fifth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Aliquam erat massa, facilisis et eros a, auctor dapibus odio. Nam consequat nulla vel elementum vestibulum. Suspendisse ut sem elementum, blandit lorem a, dictum tortor. Proin mauris neque, tincidunt vitae dui quis, efficitur tincidunt felis. Fusce quis cursus tortor. </p>
</div>
</div>
<div class="carousel-item">
<img class="rounded mx-auto d-block" src="images/slide/slide5.jpg" alt="Sixth slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>Duis blandit, tortor et laoreet fermentum, augue metus ullamcorper ligula, a semper massa sapien sit amet massa. Donec sem quam, fermentum vel quam nec, maximus condimentum turpis. Praesent eu viverra nulla, id consectetur felis. Aenean sed metus nisl. Donec nec enim placerat, interdum tellus pulvinar, tristique risus.</p>
</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>
</section>
With the "rounded mx-auto d-block" class, each image is centered and the edges of the images are slightly softened. Now let's open our main.css file and start editing.
.container-slide {
background-color: black;
max-width: 100%;
}
Here we have assigned the maximum width for our container to cover the entire screen size, and we have set the background color to black.
Let's save our codes and check our page.
As you can see, our slide looks pretty good.
Let's look at the usage properties of the carousel feature in Bootstrap's documentation page.
We used default settings on our slide, but we can make changes according to the values in the table. In the following lessons, we can change these settings while we are editing our JavaScript file.
We came to the end of this part of our education. Thank you for your interest.
Posted on Utopian.io - Rewarding Open Source Contributors