Skip to content

bootstrapbay/tutorials

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BootstrapBay Tutorial Source Files

This page will be used to host the source files for our Bootstrap tutorials on YouTube. Each folder represents a separate tutorial.

Links

Home Page: http://bootstrapbay.com
Blog: http://bootstrapbay.com/blog
YouTube Channel: https://www.youtube.com/channel/UCQ7erinMCeODr6XdPknmj7w

Tutorial Descriptions

Part 1 - Introduction and Installation

Bootstrap is the most popular front-end framework for developing responsive, mobile first projects on the web. In our first tutorial, we show you how to install Bootstrap.

Part 2 - Responsive NavBar with Dropdown Menus

We build a responsive navbar with dropdown menus that is optimized for mobile devices. Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Part 3 - Fixed Footer

We build a fixed footer navbar. Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Part 4 - Font Awesome & Social Icons

We show you how to install Font Awesome and how to add social icons to your website's footer. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Part 5 - Jumbotron

We show you how to build a jumbotron and make important content on your website really standout. A jumbotron is a A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Part 6 - Grid System

We explain the Bootstrap grid system and show you how to add columns of text to your website that collapse appropriately. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Part 7 - Modal

We build a modal (pop-up box) for the website. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Part 8 - Thumbnails

We extend Bootstrap's grid system with the thumbnail component to easily display grids of images for our themes.

Part 9 - Google Web Fonts

We add Google web fonts to our Bootstrap website. Google web fonts are free, open-source fonts optimized for the web. The API service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.

Part 10 - Contact Form

We built a contact form within our modal. We use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

Part 11 - CSS Modifications

In this installment of our Bootstrap 3 tutorial, we add some custom CSS modifications to the common Bootstrap elements including the navbar, navbar links and buttons.

Part 12 - CSS Modifications

In this part of our Bootstrap 3 tutorial, we apply the CSS transform and transition effects to our thumbnail images to spice up the website. We use a transform scale of 1.1 and we use an ease transition of 0.3 seconds.

Part 13 - Adding a New Page

In this part of our Bootstrap 3 tutorial, we add a new page to our Bootstrap site to showcase the themes. We then link the page to our homepage and vice versa.

Part 14 - Building the Theme Page

In this part of our Bootstrap 3 tutorial, we start building the theme page. The page contains a page header, a thumbnail with an image preview and caption, a description of the theme and a features list using an unordered list.

Part 15 - Sidebar, Panels & Tables

In this part of our Bootstrap 3 tutorial, we build a sidebar for the theme page. The sidebar uses default panel classes with custom background colors as well as a bordered and lined table.

About

Source files for our Bootstrap tutorials.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages