CSS: Layout with Bootstrap

Prequisites

• ga-wdi-boston/html-css-layout
• ga-wdi-boston/html-css-sass

Objectives

By the end of this, developers should be able to:

• Create mobile-first, responsive site layouts using bootstrap.
• Reference bootstrap documentation.
• Add a modal to a front end project.

Preparation

1. Fork and clone this repository.
2. Install dependencies with npm install.

Twitter Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." - bootstrap.com

Bootstrap is the most-starred project on GitHub, with over 90K stars and more than 38K forks.

Bootstrap Wiki

Bootstrap is built on a grid like design that consists of rows and columns, like a table. In each row, Bootstrap utilizes a 12 column system.

Lab: Review Sites Made With Bootstrap

In squads closely inspect the following site list. Keeping these questions in mind please write down your thoughts and we will discuss them as a class.

1. How are the the pages similar?

2. How is the HTML similar among the pages?

3. As you interact with the site how does the DOM change (if at all)?

4. How are elements on the pages horizontally arranged?

5. Notice any similarities among bootstrap pages in general?

• Divinity in Tech
• UI Viking
• MintVine
• The Tool Smith
• Pave

Bootstrap Documentation

For components and jQuery plugins always reference the Bootstrap docs.

Bootstrap Documentation

Do not use premade bootstrap templates. They often have alternate versions of jQuery or Bootstrap which are different than the versions we will be using to practice.

Lab: 12-Column Grid

Lets get some firsthand experience writing Boootstrap it. Using the documentation we discussed earlier write a simple grid in the index.html file located in this repo. Make use of col-xs-#, col-sm-#, col-md-#, and col-lg-#. Try making an evenly spaced 3x3 grid.

• Place your column divs within a row div.
• Place your row divs within a container div
• Experiment with various viewport sizes

Lab: Modals and More

Follow along as I add a bootstrap modal to our current sandbox page.

On your own:

• Referencing the Bootstrap documentation add an input-group to your modal.
• Using your knowledge of jQuery write a function so that when "save changes" is clicked the input in the input field is console logged in Chrome.
• Refrencing the Bootstrap documentation add a navbar to your page.
• Move the button that opens up the modal to the navbar.

Useful Resources

• Sitepoint Sass Mixins
• Bootstrap Grid Tricks
• Hongkait Grid Tricks
• Bootstrap Documentation
• Semantic HTML
• Improve Your Markup by Extending Classes

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.