Bootstrap 4 Help

If you’re tempted to add your own styles to a page you are making with Bootstrap CSS — stop and consult these pages FIRST. It’s so much better to work with styles that Bootstrap has already given us.

  • Spacing — read everything under Notation to add margin or padding to any element
  • Textalignments, bold, italics, etc.
  • Typography — make headings much larger, style pullout quotes and source attributions, and more — LOTS here
  • Images — aligning them, centering, making responsive
  • Buttons — make them bigger, smaller, full-width, etc.
  • Colors — add the Bootstrap colors with these special styles
  • Alerts — even more colors (lighter colors)
  • Forms — all the styles for form controls, labels, etc.

Collapse is a Bootstrap replacement for jQuery hide/show.

Remember, all the things can be found in links on the left side of the Bootstrap Documentation pages.

The special layouts and devices such as the Carousel can be found on the Examples page. The code for those is in the GitHub repo on THAT PAGE — click the “Download source code” button and download the zipped repo file. Find the files you need by opening, in order, these folders:

  1. site
  2. docs
  3. 4.1
  4. examples

Happy Bootstrapping!

Advertisements

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.

Page layout

Here is a wonderful example of page design that:

  • Enhances the story.
  • Does not use flashy gimmicks.
  • Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
  • Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).

Screen Shot 2015-11-19 at 10.57.41 AM

Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.

The design itself helps to tell the story more clearly.