Bootstrap Cover Page

admin

Classic Cover Classic Cover - Video Background One Page Websites for building simple and beautiful home pages. Download, edit the text, and add video from YouTube to make it your own. The theme is open source, and you can use it for any purpose, personal or commercial.

Get 68 cover page Bootstrap website templates. All created by our Global Community of independent Web Designers and Developers. Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background color and photo to make it your own. Best viewed on full screen. Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Other BS4 Basic Template BS4 Exercises BS4 Quiz Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts.

Sometimes you need an image slider for your site or for a landing page you are working on.

Usually, you need it to be on the top part of the page and to occupy the entire width of the browser.

Well, the Bootstrap Carousel component can do that quite easily!

Cover

What about an image slider that is not only full-width but also full-height? In other words, an image slider that occupies all the initial viewport when the page loads?

The Bootstrap Carousel can do that too, even though with a few more tweaks.

Today, we will see how you can create all the above: a Full-width and a Fullscreen Bootstrap Carousel, by using 3 methods that are slightly different from each other.

In the end, you can download all the templates as usual.

So, let’s begin!

1. Bootstrap Carousel Full Width

In this tutorial, we will use Bootstrap version 4.5.3 and of course, the Bootstrap Carousel component.

The final result will look like this:

The HTML

Let’s start with the HTML code (file “index.html”) and create a simple carousel.

To make it full-width we don’t use any Bootstrap “container” or “row”, just the carousel which I have placed inside a “div” tag (class “top-content”) with a 100% width.

The images I’ve used are 1920 pixels wide so they should cover pretty much every type of device.

* Note: I’ll not show the code for all the sections of the page here, just for the carousel. You can see the entire code by downloading the templates below, or by opening the demos from the links I’ll provide here and viewing their source code in your browser.

As you can see, it’s a simple carousel with 4 images, captions, indicators, and controls, just like the documentation suggests.

The CSS

Let’s use some CSS code (file “assets/css/style.css”) to style it:

Media Queries

With some CSS Media Queries (file “assets/css/media-queries.css”) we decide the layout of the page for mobile devices:

We hide the indicators, decrease the font size of the headings, and hide the caption descriptions on smaller devices (with a viewport width smaller than 575 pixels).

And that’s all for the full-width carousel!

Don’t miss:Bootstrap 4 Lightbox Image + Video Gallery: Free Template + How To

2. Bootstrap Carousel Full Screen: 1st Method

The final result will look like this:

The HTML

Bootstrap Cover Page

The HTML code is the same as the first example, so I will not show it. All the work is done by the CSS code, let’s see.

The CSS

Bootstrap Cover Pages

Free bootstrap designs

The CSS code (file “style.css”) is very similar to the first example. We make the slider occupy all the viewport by adding this code:

We make the carousel items occupy all the height of the viewport with “height: 100vh”.

Then we give the images a 100% height and with “object-fit: cover”, we make them occupy all the space of their container (“.carousel-item”).

Media Queries

The media queries are also very similar. We just add the line below to set a minimum height of 400 pixels for the slider on smaller devices:

That’s all, you can see a live preview below.

You might also like:Bootstrap Carousel with Videos, Images and Captions: How To + Template

3. Bootstrap Carousel Full Screen: 2nd Method

Another way to create a fullscreen slider is to set the images as backgrounds using CSS.

The final result is the same.

The HTML

We remove the images from the HTML code (the “img” tags inside “carousel-item”-s).

We also add the classes “carousel-item-1”, “carousel-item-2”, etc., to each carousel item, to set a different background for each of them with CSS.

Bootstrap Cover Page Design

Bootstrap Cover Page

The CSS

Now with some CSS, we set the background images.

We give a “background-size: cover” to the carousel items, so the backgrounds cover their entire container.

Bootstrap Cover Page

Media Queries

The media queries are the same, so nothing to show here, let’s move on to the live preview.

Download and License

DOWNLOAD: Bootstrap Carousel Fullscreen (566 downloads)

LICENSE:
You can use this template as you like, in personal or commercial projects. Just don’t sell it as is.

Conclusion

In this tutorial, we created a full-width and two full-screen image sliders using the Bootstrap carousel component and a few simple tweaks.

I hope you find it useful!

Let me know if you have any questions or suggestions in the comments below.

Bootstrap Sample Free

Stay Updated

Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:

To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.

Favorite Themes

Bootstrap Cover Page Sample

  • Landing Zero Theme
    A free landing page theme with video background
  • New in Bootstrap 4 Theme
    Bootstrap 4 one page example of what's new
  • Bootstrap 4 Admin Dashboard
    Bootstrap 4 admin starter theme
  • Lattes
    Lattes is a multipurpose theme with modern and clean elements, using plenty of white space to put most of the focus on your content. Lattes boasts a fully responsive design, clean HTML markup, bootstrap framework, portfolio grid and an amazing responsive navigation.
  • Rage
    Rage is a creative and fresh-look Multipurpose template made for Creative, Portfolio, Business website. Rage is a clean Multipurpose template with design features specifically for Creative site.
  • Parallax One
    A stunning, responsive Free One Page WordPress theme excellent for Creative Individuals!
  • Intense - Multipurpose Website Template
    A multipurpose HTML5 bootstrap template by Template Monster is the comlete package for any web designer
  • Light Bootstrap Dashboard Pro by Creative Tim
    Light Bootstrap Dashboard PRO is one of the best Bootstrap Admin Themes out there!

  • More