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: raybo.org/bootstrap4layouts/
There are several different layouts available:
- Column Based
- Media
- Grid
- Carousel
- Nested
- Icons
- Floater
- Cards
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="http://planetoftheweb.com/i/phone.svg" alt="Photo Sample">
</div>
<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>
</div>
</div>
</div>
</section>
</article>
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.