Skip to content

An example website that shows how to use Bootstrap to create a responsive website.

Notifications You must be signed in to change notification settings

JasonBraithwaite/bootstrap_yt_tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bootstrap_yt_tutorial

This program is just an example of how to use Bootstrap to create web-pages.

It is there as a reference guide and example for future projects that use bootstrap.

This site is fully responsive.

This project has a Nav Bar that reduces to a hamburger menu for mobile devices.

It contains a Carousel image slider that rotates images at timed intervals. The text overlay is removed for mobile devices. This includes using a previous and next button to allow the user to rotate through the slides manually.

The site has a three column section that includes image and text that resizes to a one column for smaller screens

It has a fixed background section with a text overlay with two buttons that when pressed lead to a Modal Popup section.

This project has a Navbar collapse seen in this project as the Emoji Navbar collapse. The Navbar will open when clicked and display 4 emojis. When clicked again the navbar will collapse and hide the emojis.

The site contains a two Column and Jumbotron Section directly below it ("looking for quality web development and design services? Contact Us Today"). Note how the Contact Us Today Button has padding top when in small screen and no padding when the screen gets bigger using pt-4 pt-md-0.

Finally the project includes a footer and socket section that is centered, has a logo and further logo links to Social media.

Added media queries to resize text size in the overlay text for the carousel images at large and medium size screens