Awesome Open Source
Awesome Open Source

Bootstrap 4 Layouts

Bootstrap 4 layouts

This repository is a template for building responsive websites for Bootstrap 4. It provides a quick template for getting started with different layouts. It's based on a course I built for LinkedIn learning called Bootstrap 4 Layouts: Responsive Single-Page Design. If you want to see a demo of the layouts, check out:

There are several different layouts available:

  • Column Based
  • Media
  • Grid
  • Carousel
  • Nested
  • Icons
  • Floater
  • Cards

Structure of Layouts

Each is designed to showcase a different aspect of how Bootstrap Layouts work. Here's a code sample from the Floater Layout:

  <article id="page-floater" class="page-section vertical-padding">

    <section class="layout-floater container text-reverse">
      <div class="row align-items-center justify-content-center">

        <div class="col-8 col-md-4 img-container">
          <img class="layout-image img-fluid" src="" alt="Photo Sample">

        <div class="col-10 col-md-6 align-self-center">
          <div class="my-5 text-center text-md-left pl-md-5">
            <h2 class="layout-title">Floater Title</h2>
            <p class="layout-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga ex delectus sunt natus doloremque praesentium
              aspernatur, totam tempora officia, sed fugit? Libero voluptatem nulla mollitia, amet dolor iste magni.</p>



Each layout is in it's own <article> tag, which begins a layout and has an id with the page- prefix. Most layouts (not the floater layout) also have an optional <header>. They sholuld be self explanatory.

I'd love to see some Pull Requests with additional layouts.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (10,847
bootstrap (656
template (512
design (370
bootstrap4 (229
themes (125
bootstrap-template (47
layouts (16

Find Open Source By Browsing 7,000 Topics Across 59 Categories