66. Bootstrap 4 Jumbotron and Carousels – Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we are going to add a text using #jumbotron and work with #carousels for our #bootstrap 4 based website project.

What is a Jumbotron?
-A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable.

Bootstrap Jumbotron is a responsive component in which the main goal is to focus the visitor’s attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value.

Use a div element with class .jumbotron to create a jumbotron.

Steps to add jumbotron:
– Use a jumbotron class inside a div element.
– Write any text inside the div tag.
– Close the div element.

What is a carousel?
-The carousel also known as slideshow or image slider is some of the best ways of showcasing the huge amount of content within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items.

How does carousel work?
-It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Usage
– Via data attributes: Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to=”2″, which shifts the slide position to a particular index beginning with 0.

The data-ride=”carousel” attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

– Via JavaScript: Call the carousel manually with: $(‘.carousel’),carousel()

CLASSES
.carousel – creates a carousel.
.carousel-indicator – add indicators for the carousel.
.carousel-inner – add slides to the carousel.
.carousel-item – specifies the content of each slide.
.carousel-control-prev – adds a left(previous) button to the carousel, which allows the user to go back between the slides.
.carousel-control-next – adds a right(next) button to the carousel, which allows user to go forward between the slides.

METHODS
.carousel(options) – This method initializes the carousel with optional options and starts cycling through items.
.carousel(‘cycle’) – This method starts a carousel for cycling through the items from left to right.
.carousel(‘pause’) – This method stops the carousel from cycling through items.
.carousel(‘number’) – This method cycles the carousel to a particular frame.
.carousel(‘prev’) – This method cycles the carousel to the previous item.
.carousel(‘next’) – This method cycles the carousel to the next item.

EVENTS
Bootstrap’s carousel class exposes two events for hooking in to carousel functionality. Both events have the following additional properties:
– direction: The direction in which the carousel is sliding (either “left” or “right”).
– relatedTarget: The DOM element that is being slid into place as the active item.
– from: The index of the current item.
– to: The index of the next item.
slide.bs.carousel: This event fires immediately when the slide instance method is invoked.
slid.bs.carousel: This event is fired when the carousel has completed its slide transition.
So, to add a carousel in the project go through this video.

—————————-

Week 2: Day 4
Section 9: Bootstrap 4: Skate or Die Website
Tutorial 66: Bootstrap 4 Jumbotron and Carousels

—————————-
Do subscribe and hit Bell Icon
—————————-

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

—————————-

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.

—————————-

Affiliate Space

Brand: Hostinger International
https://www.hostg.xyz/SH13I (International)
https://www.hostg.xyz/SH2H (For India)