Learning Bootstrap 3 - Tutorial From Infinite Skills

Explore Bootstrap documentation across the CSS section, grid system, components, and JavaScript, and learn how glyph icons, dropdowns, nav bars, pagination, breadcrumbs, transitions, and modals power modern UI.

Explore bootstrap's grid fundamentals by learning how the container centers content, uses breakpoints at 1200, 992, and 768 pixels, and expands to full width with padding.

Explore bootstrap's grid by building a container, a row, and 12-column columns to create layouts with widths like 4 and 8 or 2 and 2, quickly boosting design versatility.

Discover how to build a responsive Bootstrap 3 grid across devices by adjusting column spans at large, medium, small, and extra small breakpoints, with fixes and hidden and visible classes.

Offset the second column by four to create a central gap in a two-column Bootstrap 3 layout, adapting across medium to extra small breakpoints while filling 12 columns.

Explore nesting Bootstrap columns by creating a nine-wide column containing a nested inner row with two six-wide columns, totaling 12, and learn how the grid uses percentages and breakpoints.

Discover how Bootstrap's responsive images use the img-responsive class to scale inside a container without breaking the layout.

Master Bootstrap 3 responsive utility classes to hide or show elements at specific breakpoints while noting hidden content still downloads assets on smaller devices.

Identify bootstrap 3 breakpoints at 768, 990, and 1200 pixels and learn how media queries adjust CSS for extra small, tablet, and desktop layouts to create a responsive design.

Build a responsive Bootstrap navigation bar with a header and branding linking to home, featuring an active home link and a toggleable menu for small screens.

Fix the bootstrap 3 navigation bar to the top of the page using the navbar-fixed-top class, experiment with height adjustments, and compare navbar-default and navbar-inverse colors.

Enhance a bootstrap nav bar by adding a dropdown section with a dropdown menu and social links, using a non-navigating title link and a caret.

Build the Bootstrap 3 intro section by adding navigation, creating an intro block with a container, row, and columns for image and text, and applying a background and text styling.

Build a marketing panel with a Bootstrap 3 two-column layout, add image and text, style with CSS, adjust background colors and the horizontal rule, and plan future buttons.

Add a button to the marketing section using Bootstrap classes, highlighting primary, default, success, info, warning, and danger, with sizes from large to extra small and responsive layouts.

Create an info panel under the marketing section with an orange background and top transparent images, using two Bootstrap columns: a tabbed content area and a blockquote.

Learn to add a blog quote block in Bootstrap, remove surrounding spaces, and display the author in a small tag, then adjust the info panel color with CSS.

Learn how to build toggleable tabs in Bootstrap by creating an ordered list of tabs linked to corresponding tab content, with an active state showing Android content.

Explore Bootstrap glyphicons, a typeface-driven icon set, and learn to render stars with span elements using glyphicons. Adjust spacing and ensure responsive alignment on small screens.

Build the bootstrap 3 footer with left and right columns, floating layout, an address block, and an email and phone link section, plus a responsive logo and copyright text.

Add a custom typeface from Google Fonts, select weights 300 and 400, embed the line into your project, and set font-family with a responsive Bootstrap template.

Build a bootstrap 3 image carousel on the index page with slides, an active item, and captions, then tune CSS to fill the width and enable transitions every four seconds.

Add left and right navigation to a Bootstrap 3 image carousel, implement carousel indicators, and handle slide targeting with data attributes and active states for responsive controls.

Explore building a four-column bootstrap 3 grid, add content sections with images and headings, and apply breakpoints, padding, and clearfix for responsive layouts.

Activate the index page in the menu and set up a two-column Bootstrap grid inside a container and row, with the main content spanning eight columns and a sidebar.

Create and style blog entries using Bootstrap 3 by adding a blog section, a heading link, lead text, a clock glyph, a responsive image, and a read more button.

Add a Bootstrap pagination component to the blog page by creating an ordered list with list elements, marking the current page, and including left and right arrows at the bottom.

Build a right sidebar search box with Bootstrap 3 input groups, featuring a magnifying glass icon and placeholder, plus an end-of-input button.

Add a new sidebar section and build a Bootstrap 3 list group with linked items and badges, highlighting an active one, then duplicate lines to add more items.

Create a Bootstrap media component with a left image and right text, using Bootstrap classes and padding to render a Twitter feed in a blog layout.

Explore bootstrap grid by building a client's page, adjusting intro text, and adding a main body with horizontal rules, organized into rows with tooltips and panels in a padded container.

Add eight responsive thumbnail images in a Bootstrap grid, wrap each in a link to trigger tooltips on hover, and implement the JavaScript-powered tooltip for client logos.

Learn how Bootstrap tooltips are powered by JavaScript, initialize using data-toggle attributes on target elements, and preview collapsible panels that unfold to reveal content.

Create a collapsible panel group using bootstrap 3, configure panel headings and accordions with unique collapse IDs, and use clickable links with data-toggle='collapse' to open and close each panel.

Set up a responsive two-column grid in Bootstrap 3, place a full-width map outside the container, and apply a media query to height 500px with a targeted CSS rule.

Embed a Google Maps map on your page by copying the iframe, set width and height to 100 percent, and wrap it in a container with a row and link.

Learn how to build a user-friendly contact form using Bootstrap 3's horizontal forms, including form groups, labels, an email input, a textarea message, and a final submit button.

Show a bootstrap modal after form submission to thank the user, using a header, body, and footer with close and ok buttons that return to the home page.

Build a responsive Bootstrap sidebar using a circular office image, horizontal rule, and address; inspect layout with map, form, tooltips, panels, and a social drop menu across devices.

Customize Bootstrap by selecting only needed components and plugins, starting with the full download and trimming print styles, code formatting, and unused features to create a lean, deployable build.

Customize Bootstrap colors using the customize page and Bootstrap Magic to preview primary, success, warning, and danger in action, apply changes, and save for smaller file sizes.

Explore bootstrap starter templates to jump-start site design using getting started examples and stopbootstrap templates, then customize colors and typography to match your brand.