CSS in The Jungle

It's Bootstrap, innit.

These pages were written by hand as a learning exercise.

This page follows along with the sections of the Tutorial Republic Bootstrap tutorial

Getting started

There is a meta element <meta name="viewport" content="width=device-width, initial-scale=1"> in the page header. This tells the browser to not attempt to scale down the page, but instead to use media queries to figure out layout on narrow screens such as phones etc. Note that this is not part of any web specification - it is just a widely supported convention (originated with Apple). The UX aim is to avoid horizontal scrolling. The content values themselves mean the following:

width=device-width special value meaning the viewport is the width of the device screen

initial-scale=1 the initial zoom level of the page (i.e. 100% - one CSS pixel is the same size as one device pixel)

Some useful links about Viewport:
W3S Schools
Quirks Mode
Web Code Geeks
Mozilla Developer Network

In the header there is a link to the Bootstrap CSS via a CDN. Instantly makes the page look better!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

At the foot of the body there are links out to JS scripts for Bootstrap and JQuery (which is a dependency)
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Containers

This is a Bootstrap responsive container with "dark background" and "light text" utility classes.
This container has a border around it.
This container has a border around it, margins and padding - again using the Bootstrap utility classes.

Bootstrap Grid System

Top Left
Top Right
Bottom Left
Bottom Right