More CSS:
Flexbox
Media Queries
Bootstrap

Tim Carlson
Winter 2026

View of the Day

  • Review the 3 big things

  • Flexbox

  • Media Queries Demo (code together!)

  • Bootstrap Demo (code together!)

    • Utility Classes
    • Responsive Bootstrap
    • Interactive Widgets

Updating Lecture Code

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

Live-server

To Install: "npm install -g live-server"

To run: "live-server ."

  • Allows you to run a local web server on your box
  • Don't have to "refresh" to see changes you are coding
  • --open=<filename> argument opens html file other than 'index.html'.

Q&A

(https://pollev.com/timca1)

Flexbox

Flexbox

A flexbox is an element that allows you to flexibly customize the layout of its children.

An element is made into a flexbox by giving it the display: flex CSS property.

flexbox

child elements

Sample Code

Demo: Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox Properties

Customize the layout of the flexbox's children by given the flexbox additional CSS properties. For example:

flex-wrap

justify-content

Child Properties

You can also customize the children of the flexbox (the elements that are inside the box) by giving them additional CSS properties. For example:

flex-grow

Flexbox vs. Children

Don't get the flexbox (sometimes called the flex container) mixed up with the child elements (sometimes called the flex items) that are inside of it! 

  • The flexbox specifies how its children are positioned.
  • The child elements specify how much space they should take up.

Nesting Flexboxes

A flexbox can contain other flexboxes inside of it!

That is: a child of a flexbox can itself be a flexbox (specifying how its children are positioned).

But a flexbox only influences its children, not its grandchildren! A flexbox lays out its child boxes; what happens inside those boxes is their own business.

Using Flexboxes

Flexboxes are great solutions for:

  • Centering block elements (use justify-content)
  • Creating "columns" for a page"
  • Making an element fill a space larger than its content (use flex-grow)
  • ... and more!

 

Flexboxes are not great solutions for:

  • Having block elements stack on top of each other (just use normal elements!)
  • Adding specific spacing between elements (use margin/padding)
  • ... doing anything else that the browser does by default!

Media Queries

Which of the following are important when designing websites for mobile devices?

Layout: e.g., stacking elements rather than having side by side

Media: having small (or no) images to reduce loading times

Fonts: making text large enough to read

Navigation: e.g., using a "hamburger menu" to take less space

Inputs: making sure buttons/icons are large enough to tap

Content: including mobile-specific content (e.g., tel:links)

Mobile-first design involves...

1. maintaining functionality when moving to limited devices (graceful degradation)

2. adding functionality when moving to super-capable devices (progressive enhancement)

In a mobile-first approach, a site's design and style (read:CSS) should have:

1. "normal" styling for desktops/laptops; media queries for mobile

2. "normal" styling for mobiles; media queries for desktops/laptops

In a CSS file, media queries should be written:

1. at the top of the file

2. in the middle of the file

3. at the bottom of the file

True or False: A media query can contain multiple rules?

1. true

2. false

Demo: Media Queries

Example: Analytics Report from the app I work on (yesterday)

Notice the percentages of mobile/desktop/tablet

Example:  Analytics Reports from the app I work on (yesterday)

Notice broad use of browsers with high percent of chrome and safari

Example:  Analytics Reports from the app I work on (yesterday)

Demo: Media Queries

Media Queries

Mobile web browsers will do some work on their own to adjust to large web pages by shrinking content to fit

  • Page appears "zoomed out"
  • Users enlarge page to read content
  • It works, but it is not ideal

Specifying Viewport

Specifying viewport size and scale keeps the browser from automatically adjusting the size of the screen

 

Must include the appropriate <meta> element in your HTML

Media Queries (CSS file)

Media Queries conditionally apply CSS rules much like an "if" statement

Applying a condition and rules (selectors and properties) that are applied when the condition is true.

If the width > 768px:

then apply these CSS Rules

You need to put full rules (including selector) inside the media query body

Media Queries (CSS file)

Last rule on page wins thus:

  • Media queries specify conditional rules that override more general rules

 

  • "Mobile first" would have general rules replaced with more features as screen size increases

 

 

Media Queries (CSS file)

Basic Recommended Structure:

  • General selectors at top of CSS file with default mobile rules.
  • Use media queries with increasing larger min-width values.

 

If CSS file is organized by section (header, body, footer). It's okay to modify:

  • Section can have General selectors for specific section
  • Media queries specific to section
  • Move down to next section

 

Responsive Flexbox

With CSS media query turns to flexbox

block items, stacked by default

Basic HTML

Will turn to flexbox when width gets larger than 768px

Responsive Flexbox

Could add additional conditions:

At 768px it wraps with 2 columns

 

At 1200px all items will stay on the row if their size is less than with width of the parent

Bootstraps Media Queries breakpoints

https://getbootstrap.com/docs/5.3/layout/breakpoints/

More Flexbox Examples

Using Flexboxes

Flexboxes are great solutions for:

  • Centering block elements (use justify-content)
  • Creating "columns" for a page"
  • Making an element fill a space larger than its content (use flex-grow)
  • ... and more!

 

Flexboxes are not great solutions for:

  • Having block elements stack on top of each other (just use normal elements!)
  • Adding specific spacing between elements (use margin/padding)
  • ... doing anything else that the browser does by default!

Any other cleanup we should do to this page?
 

Viewport <meta>

Include the viewport meta element to allow your code to control responsive appearances (rather than the browser).

<head>
  <meta charset="utf-8"> <!-- always need this -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- more head elements, including <link> ... -->
</head>

Media Queries

/* A Media Query */
@media (min-width: 768px) {
   /* these rules apply ONLY on screens 768px and wider */

   /* a normal CSS rule */
   body {
      font-size: 1.5em;
      background-color: beige;
   }
   
   /* another CSS rule */
   .mobile-call-icon {
      display: none; /* don't show on large displays */
   }
}

CSS Frameworks

A CSS Framework is a collection of CSS rules published and made available for you to use. So rather than writing your own rules, you just use the ones provided to you.

 

Bootstrap is the oldest and most popular CSS framework. Created by Twitter in 2011. 

Link the Framework

<head>
  <!--... other elements here...-->

  <!-- link Bootstrap -->
  	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" >

  <!-- link own stylesheets AFTER framework -->
  <link rel="stylesheet" href="css/my-style.css">
</head>

https://getbootstrap.com/

Add Bootstrap to your page by including a <link> to the CSS file. This is usually loaded from a Content Delivery Network (CDN) site.

minified CSS file!

CDN

Let's look at the file!

https://getbootstrap.com/

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css

Non Minified version

Just by linking...

<head>
  <!-- link Bootstrap -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
  		rel="stylesheet" >
  <!-- link own stylesheets AFTER framework -->
  <link rel="stylesheet" href="css/my-style.css">
</head>

Before

After

Utility Classes

Bootstrap provides rules that apply to particular classes. Give an element that class in order to style it in a certain way.

Utility Classes - Spacing

Utility Classes - Spacing

margin top of 0

margin side of 1

padding on left and right of 2

padding of 3

Levels of size range from 0 to 5

Layout Containers

Components

Buttons, Cards, Carousel, Dropdowns, Navbar, Spinners, etc...

 

Button example

Form Controls

Utility Classes - Display

Utility Display Classes

Example:

Syntax

The media queries effect screen widths with the given breakpoint or larger.

Utility Classes

We tend to write the responsive utility classes left to right:

 

<div class =d-none d-sm-block d-md-none">

Within the HTML brackets '<' '>' the order doesn't matter. Bootstrap has the media query ordered in the CSS file smallest to largest.

Make sure to put link your stylesheet further down in the html file than bootstrap to override bootstrap classes

Utility Classes

For more utility classes, check the Bootstrap Documentation

https://getbootstrap.com/docs

Responsive Utilities

Bootstrap has responsive versions of most utility classes. These class names include a infix indicating at which size (or larger) the styling should apply.

Bootstrap Grids

row

row

column

column

column

Bootstrap Grids

row

row

column

column

column

Bootstrap Grids

row

row

column

column

column

Grid Columns

There are 12 columns in the grid

Elements can take up many columns

Row 1:

Row 2:

Row 3:

Specify columns based on screen-size

Smaller screen display

A Row:

Interactive Widgets

The Bootstrap framework provides some interactive "widgets" you can use without writing separate JavaScript code, just by using specific HTML attributes.

https://getbootstrap.com/docs/5.3/components

 

You will need to add Bootstrap's JavaScript code to your page by including a <script> tag in your <head>

 

<head>
  <!-- include Bootstrap library (before your script!) -->
  <!-- copy script tag from the Bootstrap home page -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

Example: Collapsables

As a simple example, you can make an element "collapsable" so that it disappears with a button click!

https://getbootstrap.com/docs/5.0/components/collapse/

<button class="btn btn-primary" 
        data-bs-toggle="collapse" 
        data-bs-target="#collapseExample" 
        aria-expanded="false" aria-controls="collapseExample">
   Button with data-bs-target
</button>


<div class="collapse" id="collapseExample">
    Some placeholder content for the collapse component. This panel is 
    hidden by default but revealed when the user clicks the toggler.
</div>

aria for screen-readers

Example: NavBar

See https://getbootstrap.com/docs/5.3/components/
navbar/#toggler for an example of a NavBar with a collapsible "hamburger menu"

Action Items!

  • Complete task list for Week 3 (all items)

    • You may need to catch up with videos!

    • There is a lot this week again...

  • Read: Chapter 10

  • Problem Set 03 due Wednesday (tonight!)

  • Problem Set 04 due Sunday


Next: JavaScript!

info340wi26-css-ii

By Tim Carlson

info340wi26-css-ii

  • 38

More from Tim Carlson