A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning
Alternatives To Bootstrap4layouts
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Learning Java 2825378544
8 months ago34other
This repository is for the Linkedin Learning course: Learning Java
6 months ago32January 02, 20222mitPython
Linkedin Learning Video Downloader
Angular Essential Training207
5 months ago45mitTypeScript
Angular2 Essential Training190
4 years ago8mitTypeScript
The repository for the project code for my course Angular Essential Training
Css Essential Training177
9 months agoHTML
Exercise files for the CSS Essential Training course on LinkedIn Learning and
Js Ts Monorepos174
a year ago5bsd-2-clauseTypeScript
Mike's JS/TS Monorepos Course
2 years agoSCSS
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and
2 years agootherHTML
Repository for my tutorial course: Bootstrap 4 Essential Training on LinkedIn Learning and
Advanced Terraform 2823489144
5 months ago13otherHCL
Advanced Terraform
5 years ago5HTML
This is the repository for my course, Building a Website with Node.js and Express.js on LinkedIn Learning and
Alternatives To Bootstrap4layouts
Select To Compare

Alternative Project Comparisons

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.

Popular Linkedin Projects
Popular Course Projects
Popular Companies Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Bootstrap Template