Learning Bootstrap 2 - A Course For Beginners

Download and explore the Bootstrap framework, review its core folders—css, images, and js—compare standard and minified files, and learn when to use responsive and minimized versions.

Explore the Bootstrap documentation to understand the framework, download files, and navigate the Get Started guides, file structure, and CSS/JavaScript components, including jQuery.

Explore bootstrap containers, including fixed and fluid widths, by wrapping content in a div with class container or container-fluid. Observe how the container resizes with the browser.

Explore the Bootstrap default grid system, a 12-column layout that defines content width and column structure using row divs and span classes such as span four.

Develop practical Bootstrap grid skills by constructing rows and 12-column spans, tweaking CSS for styling and spacing, and experimenting with column widths.

Learn how to create column offsets in bootstrap 2 by applying offset classes to span columns, nudging content with offset values to control white space in a grid layout.

Learn to create nested columns in Bootstrap by placing inner columns inside a parent span, ensuring inner spans add up to the parent's span, using container, row, and div structures.

Learn how bootstrap's fluid grid works by converting to container-fluid and row-fluid, resizing columns with browser width, and nesting columns that always add up to 12.

Explore Bootstrap's grid system by examining templates from the get started page, viewing source to identify container fluid and row fluid classes, and practice default and fluid grids.

Explore bootstrap's responsive features, including a fluid grid and breakpoints that adjust layout by browser width, and note that enabling them requires adding an extra CSS file.

Enable Bootstrap responsive features by adding the viewport meta tag and including default and responsive CSS in order, so breakpoints around 980px stack columns and container-fluid rows create fluid layouts.

Learn to use Bootstrap responsive utility classes to hide or show content by browser width, using visible-phone, visible-tablet, and visible-desktop. Test breakpoints like 767px and 980px to show mobile content.

Build a Bootstrap nav bar by creating container divs, a nav bar inner, and an unordered list of links with active and brand classes, dividers, and a right-aligned sign-in.

Explore Bootstrap glyph icons and view the full icon list on the Bootstrap site, then apply the corresponding class to display a user icon beside sign-in text.

Learn how to fix the navbar to the top of the browser with Bootstrap 2, and manage content with a container and a custom css file.

Create a top nav dropdown by marking a services item as dropdown, using a dropdown-toggle link with data-toggle='dropdown', adding a caret, and composing a nested dropdown-menu with icon-enhanced items.

Build a Bootstrap footer by adding a container, a row, and two columns (span4 and span8) to organize text and navigation links.

Practice building bootstrap navigations by exploring the components page, including dropdowns, button groups, button dropdowns, and nav bars, and inspecting live examples to understand structure and CSS rules.

Explore how Bootstrap text styles apply to a blog page, using lead paragraphs, block quotes with attribution, abbreviations and initialism, and text alignment utilities like text-right and pull-right.

Insert images into a bootstrap blog page by setting the source and floating the image with pull-left, then apply margins and options like img-rounded, img-circle, and img-polaroid.

Learn how to implement Bootstrap media objects for comments, placing a left-aligned avatar beside a right-side comment body, including nesting for replies.

Create a Bootstrap breadcrumb with an unordered list using the breadcrumb class, featuring home, blog, and the article. Add a divider and set the current page as active.

Learn to implement a Bootstrap pagination navigation with previous, next, and page links, placed below the article content using a div.pagination and an unordered list, with active and disabled states.

Create a full-width hero unit for the about page featuring a large background image and four service icons (web design, graphic design, photography, video), with a container-based content area.

Style the hero unit with a full-width background image and centered text for readability. Remove rounded borders and adjust height and padding for a tighter layout.

Style the hero unit's featured icons with a panel, add a semi-transparent background, center text, rounded corners, and a hover-over panel that overlaps the hero, including a 'click here' link.

Learn how to create tabbed content with bootstrap, organizing long page text into tabs like our team, mission, and company, using nav tabs, data-toggle, and tab panes.

Explore bootstrap tab options by reviewing a tabbed content example and using the data-toggle attribute to create tabs without jquery, including dropdowns and bottom, left, and right nav layouts (nav-tabs).

Build a responsive Bootstrap image carousel on the home page with multiple slides, an active first slide, navigation controls, and slide captions.

Learn to add left and right navigation arrows and indicators to a Bootstrap carousel, wiring controls to the slideshow id with data-slide and data-target attributes.

Learn how to create and trigger Bootstrap modals, including header, body, and footer sections used as an image lightbox later, with close buttons and data attributes to show and hide.

Explore Bootstrap image thumbnails as a four-column grid alongside a carousel, with hover borders and captions, featuring web design, graphic design, photography, and video production, while preparing for lightbox modal.

Learn to add a click-to-open image modal in Bootstrap 2 by wiring thumbnails to modal divs, using data attributes and custom CSS for a larger, dismissible image view.

Learn how to build a Bootstrap modal lightbox to enlarge images, customize width and centering with CSS, remove max-height limits, and apply the same approach to multiple images.

Explore bootstrap's default form stylings by building a simple contact form with labels, inputs, a text area, a legend, and a submit button labeled send the email.

Learn to build bootstrap inline forms with the form-inline class, including username and password fields and a sign in button, plus size helpers like input-sm and input-lg.

Create a horizontal form in Bootstrap using form-horizontal, pairing labels and inputs with control-group wrappers, and include username, password, remember me, and a sign in button.

Master prepended and appended inputs in Bootstrap by attaching text to the left or right of input fields, including a Twitter ID with an at sign and a dollar amount.

Discover how to append a button to an input in Bootstrap, using an input-append container and an inline form to create a button attached to the field.

Learn how to apply Bootstrap validation states—info, warning, error, and success—to form fields to highlight input issues, with no back-end logic discussed.

Learn to create bootstrap alerts at the top of a page, with a closable X and styles like alert-info, alert-warning, and alert-error for validation messages.

Learn how Bootstrap button options enhance a basic form submit. Use btn-primary, btn-info, btn-warning, btn-danger, btn-success, btn-inverse, btn-link, and sizes like btn-large, btn-small, btn-mini.

Explore the Bootstrap progress bar feature, learning to create basic, striped, animated, and stacked progress bars from the components section to provide visual progress feedback for multi-page forms.