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 [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for internship or freelancing opportunities. For consultation or partnership, related queries drop a mail to [email protected]. ---------------------------- Affiliate Space Brand: Hostinger International https://www.hostg.xyz/SH13I (International) https://www.hostg.xyz/SH2H (For India)