Bootstrap & Responsive Design Quiz

Configuring Web Pages for Mobile Devices

• To ensure proper rendering and touch zooming, add the width=device-width and initial-scale=1 tags to the meta element in the HTML header.
• The width=device-width tag sets the page width to follow the screen width of the device.
• The initial-scale=1 tag sets the initial zoom level when the page is first loaded by the browser.

Bootstrap Containers

• Bootstrap requires a containing element to wrap site contents.
• There are two container classes: .container and .container-fluid.
• .container provides a responsive fixed width container.
• .container-fluid provides a full width container, spanning the entire width of the viewport.
• Containers are not nestable.

Bootstrap Grids

• Bootstrap's grid system allows up to 12 columns across the page.
• Columns can be grouped together to create wider columns.
• The grid system is responsive, and columns will rearrange automatically depending on the screen size.
• Grid classes include xs, sm, md, and lg for different screen sizes.

Basic Structure of a Bootstrap Grid

• Create a row using the .row class.
• Add columns using the .col-*-* class, where numbers in the class should always add up to 12 for each row.

Bootstrap Tables

• A basic Bootstrap table has a light padding and only horizontal dividers.
• The .table-bordered class adds borders on all sides of the table and cells.
• The .table-striped class adds zebra-stripes to a table.
• The .table-hover class enables a hover state on table rows.
• The .table-responsive class creates a responsive table that scrolls horizontally on small devices.

Bootstrap Images

• The .img-circle class shapes an image to a circle.
• The .img-rounded class adds rounded corners to an image.
• The .img-thumbnail class shapes an image to a thumbnail.
• The .img-responsive class makes an image responsive by scaling it to fit the parent element.

Bootstrap Buttons

• Bootstrap provides seven styles of buttons with the following classes: .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, and .btn-link.
• Button classes can be used on the following elements: button, input, and a.
• Bootstrap provides four button sizes with the following classes: .btn-lg, .btn-md, .btn-sm, and .btn-xs.
• The .btn-block class creates a block level button that spans the entire width of the parent element.
• The .active class makes a button appear pressed, and the .disabled class makes a button unclickable.

Downloading and Including Bootstrap

• Bootstrap can be downloaded from getbootstrap.com.
• Bootstrap can be included from a CDN (Content Delivery Network) like MaxCDN.
• Including Bootstrap from a CDN provides faster loading times and caching.

Creating a Web Page with Bootstrap

• Add the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set.
• Bootstrap is mobile-first, meaning it is designed to be responsive to mobile devices.
• Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.

What is Responsive Web Design?

• Responsive web design is about creating web sites that automatically adjust themselves to look good on all devices.
• Bootstrap is a popular framework for developing responsive, mobile-first web sites.

What is Bootstrap?

• Bootstrap is a free front-end framework for faster and easier web development.
• Bootstrap includes HTML and CSS based design templates for various elements.
• Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap History

• Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
• Advantages of Bootstrap include ease of use, responsive features, mobile-first approach, and browser compatibility.