Bootstrap 4 Full Hero Section

Learn how to create a responsive Hero section using Bootstrap 4 framework to market your message or showcase key content on your website.

▶ Download Exercise Files

▶ Boostrap 4 Grid System
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

▶ Bootstrap Break Points
Extra Small break point (smaller than 576 pixels)
Small break point (bigger than 576 pixels)
Medium break point (bigger than 768 pixels)
Large break point (992 pixels)
Extra large break point (1200 pixels)

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

More from Elias Sarantopoulos ❤
Creative tutorials from Elias Sarantopoulos. Helping you develop your skills with Affinity Designer, Adobe Illustrator, After Effects, and Bootstrap tutorials.

▶ Helping You Develop –





Original source

4 thoughts on “Bootstrap 4 Full Hero Section

  • May 7, 2019 at 15:42

    When you set the container with the text in the middle of the hero image and then inspect the page and make the inspector high over 70% of the screen you can see how the text container will move out of of the hero section. If you have text right after the hero image it looks very ugly when you inspect.

  • May 7, 2019 at 15:42

    I did it with the tutorial files and I succeed at getting the hero image+text (the complete tutorial) but when I wanna add it to my own page the text will appear half in the navbar and the image won't showup

Leave a Reply