This page will be used to host the source files for our Bootstrap tutorials on YouTube. Each folder represents a separate tutorial.
Home Page: http://bootstrapbay.comBlog: http://bootstrapbay.com/blog
YouTube Channel: https://www.youtube.com/channel/UCQ7erinMCeODr6XdPknmj7w
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.
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.
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.
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.
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.
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.
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.
We extend Bootstrap's grid system with the thumbnail component to easily display grids of images for our themes.
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.
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.
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.
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.
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.
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.
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.