https://github.com/planetoftheweb/bootstrap4layouts

A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning
https://github.com/planetoftheweb/bootstrap4layouts

bootstrap bootstrap-template bootstrap4 design layouts template themes

Last synced: about 2 months ago
JSON representation

A Template for Bootstrap 4 based on my Bootstrap 4 Layouts course on LinkedIn Learning

• Host: GitHub
• URL: https://github.com/planetoftheweb/bootstrap4layouts
• Owner: planetoftheweb
• License: bsd-2-clause
• Created: 2018-03-13T13:33:17.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:29:22.000Z (about 2 years ago)
• Last Synced: 2024-05-01T21:26:43.500Z (9 months ago)
• Topics: bootstrap, bootstrap-template, bootstrap4, design, layouts, template, themes
• Language: HTML
• Homepage: http://www.raybo.org/bootstrap4layouts/
• Size: 1.32 MB
• Stars: 49
• Watchers: 5
• Forks: 31
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

![Bootstrap 4 Layouts](screenshot.png)

# 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](https://www.linkedin.com/learning/bootstrap-4-layouts-responsive-single-page-design/creating-a-bootstrap-4-layout?u=104). If you want to see a demo of the layouts, check out: [raybo.org/bootstrap4layouts/](http://www.raybo.org/bootstrap4layouts/)

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:

```

  

    

      


        


          

        


        


          


            
Floater Title

            
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.

          

        


      

    


  

```

Each layout is in it's own `` tag, which begins a layout and has an id with the `page-` prefix.

Most layouts (not the floater layout) also have an optional ``. They sholuld be self explanatory.

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