Open CheatSheet Back To List Next Tutorial

How to create a web page using HTML, CSS, and Bootstrap

Intro

  • Web pages are built with the HTML (Hypertext Markup Language) markup language and are styled with the CSS (Cascading Style Sheets) styling language.

  • How clicking a hyperlink results in a web page being displayed:
    • When a user clicks a hyperlink or enters a URL in a web browser the browser sends a request over the internet to get the web page.
    • The internet Domain Name System translates the domain name to the IP address of the web server that hosts the domain and routes the request to the server. 
    • The server receives the request and sends a response back to the web browser. The response body includes the HTML, CSS, image, and JavaScript files for the web page.
    • The browser receives the response, parses the HTML, CSS, images, and JavaScript, and displays the web page according to the HTML structure and CSS styling.  

Setup a web project

  • Let's start by building a Hello World web page. That is just a web page that displays "Hello World". All you need is a text editor and a web browser.

  • Create a directory called web-project.

  • Open the project with Visual Studio Code or whatever text editor you prefer.

  • Create a file called index.html
  • You can give it any name you want, but index.html is the default name for a web page. HTML files end with the .html extension, although you will sometimes see .htm being used.

  • Create a directory called images and put an image file in it. Image files generally have a jpg, jpeg, or png extension.

Create a Hello World web page

VS Code has a snippet for an HTML skeleton. In the empty index.html file enter a "!" then press the tab key.
That will generate the following HTML:
index.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

In the space between the <body>...</body> tags enter the below:
<h1>Hello World</h1>

Open the web page in the browser

Below are two ways to open an HTML file in the browser

  • Open the HTML file directly in the browser:
    • Open the browser > click the file menu > open the index.html file. The HTML file should open as a web page in your browser. 

  • Alternatively, find the index.html file in Mac Finder or Windows File Explorer and double click it.

  • Launch the web page with the VS Code Live Server extension. Live Server creates a web server you can use to develop you web pages on your local machine. It is not meant for hosting a real website to the public.
    • Open the index.html file in the text editor. 
    • Right click anywhere in the editor and select "Open with Live Server". The index.html page will open in the browser.
    • When done, right-click the HTML page in the editor > select "Stop Live Server".

  • The web page should open and display in big bold letters: "Hello World".
  • Congratulations, you just created and displayed your first web page. 

HTML Elements and Tags

  • An HTML document is broken down into elements that represent different types of data indicated by the element's tag name. There are tags for headings, paragraphs, hyperlinks, images, lists, etc. 
  • Tags are put inside angled brackets. Elements that contain text have an opening tag and a closing tag such as: <h1>Hello World</h1>
  • Elements that don't contain text content or other HTML elements only have one tag: <hr> 
  • Below are the most commonly used elements. The full list of elements is at developer.mozilla.org/en-US/docs/Web/HTML/Element

Main Root:
  • <html>...</html> Wrap the entire HTML document in html tags. This is the root element.

Document metadata:
  • <head>...</head> At the top of the HTML document put metadata about the page in head tags. This includes the page title, links to CSS and JavaScript files.
  • <title>...</title> Put the document title in the title tags. This is displayed in the browser tab for this page.
  • <link rel="stylesheet" href="path/stylesheet"> Link to the stylesheet.
  • <link rel="icon" type="image/x-icon" href="path/image"> Link to the favicon image. The favicon is displayed in the browser tab. 
  • <script src="path/JavaScript" defer></script> Refers to the page's JavaScript file.

Content sectioning:
  • <body>...</body> Contains the content of the HTML document. There can only be one body element.
  • <nav>...</nav> Put navigation links or table of contents in the nav element.
  • <main>...</main> Optionally put the main content in main tags.
  • <h1>...</h1> to <h6>...</h6> Heading text. There are six heading levels. h1 is the top level, h6 is the lowest heading level.
  • <footer>...</footer> Put footer content in these tags.

Text content:
  • <div>...</div> Division element. This is the generic container for a block element. 
  • <p>...</p> Paragraph element.
  • <hr> Horizontal rule. Creates a horizontal line across the page to separate content.
  • Unordered list: Create a bullet point list. Put the whole list in ul tags. Put individual list items in li tags.
<ul>
  <li>...</li>
  <li>...</li>
</ul>
  • Ordered list: Create a numbered list. Put the whole list in ol tags. Put individual list items in li tags.
<ol>
  <li>...</li>
  <li>...</li>
</ol>

Inline text semantics:
  • <span>...</span> A generic container for inline content.
  • <b>...</b> Bold text. Used to draw the reader's attention to the element's contents.
  • <i>...</i> Italic text. Used to set the text off from the normal text for some reason. 
  • <small>...</small> Makes the text smaller than the rest of the text in the parent element. 
  • <a href="url">link text</a> Creates a hyperlink to a web page. 
    • Put the URL in the href attribute.
  • <br> Produces a line break in the parent element's text.

Images:
  • <img src="path/image-file" alt="alt text" width="x" height="y"> Embeds an image into the document. 
    • The src (source) attribute value is the path to the image file. 
    • The alt attribute is short text description of the image. 
    • Optionally add width and/or height attributes set to the number of pixels to set the width or height to. The image's intrinsic width and height is the default.

Below is an example HTML document using the above elements. Save it in the index.html page and view it in the browser. 
index.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Html Elements</title>
    </head>
    <body>
      <nav><a href="#">Home page</a> <a href="form.html">Form</a></nav>
    
      <h1>HTML Elements</h1>
      <hr>
    
      <h2>Text Content</h2>
      <h1>Level 1 Title</h1>
      <h2>Level 2 Title</h2>
      <h3>Level 3 Title</h3>
      <h4>Level 4 Title</h4>
      <h5>Level 5 Title</h5>
      <h6>Level 6 Title</h6>
      <p>First paragraph</p>
      <p>Second paragraph</p>
      <div>Generic divider tags.</div>
    
      <hr>
      <h2>Lists</h2>
      <p>Unordered list (bullet points):</p>
      <ul>
        <li>First list item.</li>
        <li>Second list item.</li>
        <li>Third list item.</li>
      </ul>
      <p>Ordered list (numbered):</p>
      <ol>
        <li>First list item.</li>
        <li>Second list item.</li>
        <li>Third list item.</li>
      </ol>
      <hr>
    
      <h2>Inline elements</h2>
      <div>
        <b>Bold text</b> 
        <i>Italic text</i><br>
        <small>Smaller text</small>
        <span>Generic inline element</span><br>
        <a href="https://www.example.com">example website</a>
      </div>
      <hr>
    
      <h2>Images</h2>
      <img src="images/html-element.png" alt="HTML element diagram" width="550">
    
      <footer>Copyright 202x</footer>
    </body>
    </html>

Forms:
  • <form>...</form> Put form content in a form element.
  • <label for="field-id">...</label> Create a label for the form field.
    • The for attribute is set to the form field's id attribute value.
  • <input id="field-id" name="field-name" type="text" > Form field accepts user text input.
    • The type attribute indicates what type of data the field accepts. Commonly used types include text, number, date, email, and password.
    • The name attribute is the name of the form field. The name and value are sent back to the server when the form is submitted.
  • <textarea id="field-id" name="field-name" rows="n"></textarea> Form field accepts multiple lines of text.
    • The name attribute is the name of the form field. The name and value are sent back to the server when the form is submitted.
    • The rows attribute sets the number of rows the field displays. The default is 2. 
  • <button type="submit">...</button> Interactive button element activated when the user clicks it. 
    • When the type attribute is set to "submit" it submits the form data when the button is clicked. 

Example Form:
  • Create a file called form.html and populate it with the below. 
  • The file contains a form with three form fields. The first is for one line or less of text. The second is for a number. The third is for multiple lines of text. 
  • Save the file and view it in the browser. 
  • The navigation bar has a link to the "Home page" that will take you back to the index.html page. The index.html page has a link to the form.
form.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Html Form</title>
    </head>
    <body>
      <nav><a href="index.html">Home page</a> <a href="#">Form</a></nav>
    
      <h1>Html Form</h1>
      <hr>
      <form>
        <div>
          <label for="field1">Short text field 1</label>
          <input id="field1" name="field1" type="text">
        </div>
    
        <div>
          <label for="field2">Number field 2</label>
          <input id="field2" name="field2" type="number">
        </div>
    
        <div>
          <label for="field3">Long text field 3</label>
          <textarea id="field3" name="field3" rows="4"></textarea>
        </div>
        <button type="submit">Save</button>
      </form>
    </body>
    </html>

Element Attributes

Below is a diagram of an HTML element. 


  • We haven't talked about attributes yet although we have used them in some of the elements above. 
  • Attributes give information about an element. Put them in the opening tag of an element. They come in name-value pairs with the value in double quotes (single quotes will also work). If there are multiple attributes, separate them with spaces.
  • All elements can have attributes but they are not required.
  • Some attributes can only be used with certain tags. 
    • Width and height attributes can be applied to images and buttons.
    • The src attribute is used with the img (image) and script tags to get the image and JavaScript files.
    • The href attribute is used in the a (hyperlink) tag to get the URL, and in link tag to get the stylesheet URL or file.
    • The type attribute defines the type of the element. It is used in the input element for the type of data it accepts. On the button element it can be used to set it as a submit button.
  • Global attributes can apply to all elements. 
    • The id attribute defines an identifier. Id should be unique in the whole document. We already used the id attribute in the form fields when we linked a label to them.
    • The style attribute applies style directly to an element. For instance you can add style="color: red" to any element and it will change the color of the element's text to red. 
    • Instead of applying style rules directly to the element you should create classes in an external stylesheet. Add the class attribute to the elements, and assign them to class names from the stylesheet.

CSS / Stylesheets

  • The HTML pages we created are currently unstyled. Browsers apply a minimal amount of default styling. So in  every case you will want to add custom styling to your web pages. To add styling:
    • Copy the web-project folder and save the copy as web-project-v2.
    • Create a new directory called stylesheets and add a file to it named style.css.
    • In the index.html file's head element add a link element to the stylesheet.
index.html
...
    <head>
      ...
      <link href="stylesheets/style.css" rel="stylesheet">
    </head>

  • Then you can add style rules to the stylesheet.

Style Rule format



Style Rule Structure:
  • Style rule: Style rules determine the styles applied to elements. Each style rule consists of a selector and a declarations block.
  • Selector: In CSS, selectors are patterns used to match, or select, the elements you want to style. In CSS the selector will usually be a class name, although it can also be a tag name, or an element id. Selectors are also used in JavaScript. In the above diagram the selector is the body tag. 
    • Type selector: tagName { declarations } match all elements in the document by the tag name. 
    • Class selector: .className { declarations } match all elements in the document by the class name. Preface the class name with a dot.
    • Id selector: #id { declarations } match all elements in the document by the element id. Preface the id with the pound sign.
  • Declarations: Put declarations for a given selector in curly braces. Each declaration consists of a CSS property name, then a colon, then the value. Generally put each declaration on its own line and end it with a semicolon.

CSS Syntax:

  • Use lower case letters for tags, id values, class names, and properties. 
  • Separate multiple words with hyphens.
  • Use semicolons after every declaration.
  • Use single quotes for values that include spaces: font-family: 'Times New Roman';

  • For style rules use separate lines for each property:
body {
  font-size: 14px;
  background-color: #fbfbf8; 
}
  • Optionally, put short style rules on one line:
body { font-size: 14px; background-color: #fbfbf8; }

  • Put comments in /* comment here */ 

HTML and CSS Files

  • Change the index and form files to:
index.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="icon" type="image/x-icon" href="images/website_icon_128x128.png">
      <link href="stylesheets/style.css" rel="stylesheet">
      <title>Html Elements with CSS Styling</title>
    </head>
    <body>
      <nav class="navbar"><a href="#" class="nav-link">Home page</a> <a href="form.html" class="nav-link">Form</a></nav>
    
      <main class="container">
        <h1>HTML Elements</h1>
        <hr>
    
        <h2>Text Content</h2>
        <h1>Level 1 Title</h1>
        <h2>Level 2 Title</h2>
        <h3>Level 3 Title</h3>
        <h4>Level 4 Title</h4>
        <h5>Level 5 Title</h5>
        <h6>Level 6 Title</h6>
        <p>First paragraph</p>
        
        <p class="shrink">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel excepturi suscipit cum natus, ad quis facilis dolorem, accusamus libero unde corrupti, eius maxime aliquam ut perferendis. Dolorem officiis recusandae explicabo.</p>
    
        <p class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel excepturi suscipit cum natus, ad quis facilis dolorem, accusamus libero unde corrupti, eius maxime aliquam ut perferendis. Dolorem officiis recusandae explicabo.</p>
    
        <div>Generic divider tags.</div>
    
        <hr>
        <h2>Lists</h2>
        <p>Unordered list (bullet points):</p>
        <ul>
          <li>First list item.</li>
          <li>Second list item.</li>
          <li>Third list item.</li>
        </ul>
        <p>Ordered list (numbered):</p>
        <ol>
          <li>First list item.</li>
          <li>Second list item.</li>
          <li>Third list item.</li>
        </ol>
        <hr>
    
        <h2>Inline elements</h2>
        <div>
          <b>Bold text</b> 
          <i>Italic text</i><br>
          <small>Smaller text</small>
          <span>Generic inline element</span><br>
          <a href="https://www.example.com">example website</a>
        </div>
        <hr>
    
        <h2>Images</h2>
        <img src="images/html-element.png" alt="HTML element diagram" width="550" class="img m-8px">
        <img src="images/style-rule.png" alt="CSS style rule diagram" width="350" class="img m-8px">
    
      </main>
    <footer class="footer">Copyright 202x</footer>
    </body>
    </html>

form.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="icon" type="image/x-icon" href="images/website_icon_128x128.png">
      <link href="stylesheets/style.css" rel="stylesheet">
      <title>Html Form</title>
    </head>
    <body>
      <nav class="navbar"><a href="index.html" class="nav-link">Home page</a> <a href="#" class="nav-link">Form</a></nav>
    
      <main class="container">
        <h1>Html Form</h1>
        <hr class="mb-16px">
        <form>
          <div class="mb-16px">
            <label for="field1">Short text field 1</label>
            <input id="field1" name="field1" type="text" class="form-field">
          </div>
    
          <div class="mb-16px">
            <label for="field2">Number field 2</label>
            <input id="field2" name="field2" type="number" class="form-field">
          </div>
    
          <div class="mb-16px">
            <label for="field3">Long text field 3</label>
            <textarea id="field3" name="field3" rows="4" class="form-field"></textarea>
          </div>
          <button class="btn" type="submit">Save</button>
        </form>
      </main>
    </body>
    </html>

  • Add a folder called stylesheets and place a file called style.css in it with the below styles.
stylesheets/style.css
body { 
      color: black; 
      background-color: ghostwhite; 
      font-family: Arial; 
      margin: 0; 
    }
    
    .container { 
      margin-left: 16px; 
      margin-right: 16px; 
    }
    
    .navbar {
      background-color: #000000;
      padding: 8px 16px;
    }
    
    .nav-link {
      color: #ffffff; 
      text-decoration: none; 
      margin-left: 8px; 
      margin-right: 8px; 
    }
    
    .footer {
      margin-top: 16px;
      border-top: 1px solid grey;
      padding: 8px 16px;
      background-color: lightgrey;
    }
    
    .shrink { font-size: 12px; }
    
    .card {
      margin: 16px 0;
      border: 1px solid grey;
      border-radius: 4px;
      padding: 8px;
    }
    
    .img { 
      max-width: 100%;
      margin: 8px;
    }
    
    .m-8px { margin: 8px; }
    .mb-16px { margin-bottom: 16px; }
    
    .form-field {
      margin-top: 4px;
      width: 600px;
      max-width: 100%; 
    }
    
    .btn {
      border: 2px solid darkblue;
      border-radius: 4px;
      padding: 4px 8px;
      color: white;
      background-color: navy;
    }

Open the index.html file in the browser to see the simple styles applied from the stylesheet. We will go through the CSS properties below including setting color, font family, font size, margin, padding, borders, width and height.

CSS Properties

Color

  • CSS color properties include:
    • background-color set the background color.
    • color set the text color.
  • Color values can be:
    • Named color values: Named colors such as black, white, yellow, etc. The full list is at developer.mozilla.org/en-US/docs/Web/CSS/named-color
    • Hexadecimal string notation: This format starts with a # sign followed by 6 hexadecimal digits using red green blue color combinations: #rrggbb. Hexadecimal numbers are base 16 represented by numbers 0-9 and letters A-F. There are two digits for each color which allows 256 possible values each for red, green and blue. The letters are case insensitive. There is a color picker tool to help you select specific colors: developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool.

Examples:
  • We will change the color of the navigation bar to a black background and change the link text color to white. Add a class named navbar to the nav element and a class called nav-link to the links. 
  • We will also add a class called "footer" to the footer which will set the background color to light grey.
    • <nav class="navbar">
      <a href="#" class="nav-link">Home page</a>
      <a href="form.html" class="nav-link">Form</a>
    </nav>
    ...
    <footer class="footer">Copyright 202x</footer>
  • To apply style rules to the whole document assign them to the body tag. The first style rule below sets the text to the default color black and background to an off-white color named "ghostwhite". Use named colors.
    • body { color: black; background-color: ghostwhite; }
  • Add styles to the navbar and nav-link classes to make the background black and the link text white. Use hexadecimal string notation. Also remove the hyperlink underline by setting text-decoration to none.
    • .navbar { background-color: #000000; }
    • .nav-link { color: #ffffff; text-decoration: none; }
  • Set the background color of the footer to light grey.
    • .footer { background-color: lightgrey; }
  • There is a button at the bottom of the form.html file. Add a class named "btn" that sets the text color to white and background color of navy blue.
    • <button class="btn" type="submit">Save</button> 
    • .btn {
      color: white;
      background-color: navy;
    }

Font family

  • A font is a graphical representation of text that may include a different typeface, weight, or design.
  • font-family Sets the font. The default font is Times or "Times New Roman" depending on the browser. Put font names that include spaces in quotes. 
  • For standard text the are two main types of fonts: serif and sans-serif.
    • Serif fonts: Serif fonts have tails on the ends of the letters. Times and Times New Roman are serif fonts. Another popular serif font is Georgia.
    • Sans-serif fonts: San-serif fonts do not have tails at the end of the letters. San-serif fonts are more popular for websites because the tails on serif fonts don't look as sharp on low resolution screens. Popular Sans-serif fonts include: Arial, Helvetica, Tahoma and Roboto.

Example: body { font-family: arial; }

Length units and Percentages
  • There are several CSS properties that take length units or percentages as their value. These include font-size, margin, padding, border-width, border-radius, width, min-width, max-width, height, and more. 
  • px: measures length in number of pixels. One pixel represents 1/96th of an inch or .2645833 millimeters.
  • %: measures length as percent of available space. 100% takes up all available space.

font-size

  • font-size Set the size of the font. Default is 16px.

Example: 
  • Add a class called shrink to the paragraph element. This will change the font-size from the default 16px to 12px. In the stylesheet set the shrink class font-size property to 12px. Note, the example HTML file has lorem ipsum filler text in it. You can generate Lorem Ipsum with a VS Code snippet by typing in lorem then press the tab key.
    • <p class="shrink">lorem ipsum...</p> 
    • .shrink { font-size: 12px; }

Margin, Border, Padding 

  • An element's content area has an invisible four-sided box around it. This is called the box model:

  • margin Margin is the space around an element that separates it from the adjacent elements.
  • padding Padding is the space between the edge of the element and the content. 
  • border Border is a line that goes around the element. Most elements do not have a visible border (i.e., border width is 0) but form elements like button, input, and textarea do have visible borders. 
    • The border shorthand property takes three values: border: width style color; (e.g., border: 1px solid black;)
      • Width: Set width in pixels. 
      • Style: Generally style will be "solid" for a solid line, but there are other styles that can be used.
      • Color: use named or hex color values to set the border color.
  • border-radius Create rounded corners on borders.

  • One value: Set all 4 sides with the same value (replace n with the number of pixels): 
    • margin: npx;
    • padding: npx;
    • border: npx style color; 

  • Two values: The first value sets the top and bottom length, the second value sets the left and right length:
    • margin: npx npx; 
    • padding: npx npx; 

  • Individual sides: To set one side only, add the side to the property name:
    • margin-top: npx; | margin-bottom: npx; | margin-left: npx; | margin-right: npx;
    • padding-top: npx; | padding-bottom: npx; | padding-left: npx; | padding-right: npx;
    • border-top: npx style color; | border-bottom: npx style color; | border-left: npx style color; | border-right: npx style color; 

Examples from the style.css file: 
  • Browsers have a default margin of 8px on the body element. Change that to 0:
    • body { margin: 0; } 
  • In the index.html and form.html files add main elements with class set to "container" to add margin on the left and right sides of the browser window. In the CSS file add a .container class that sets the left and right margins to 16px.
    • <main class="container">...</main> 
    • .container { margin-left: 16px; margin-right: 16px; } 

  • Add a navbar class to the nav element and nav-link classes to the links in the navbar. 
    • <nav class="navbar">
      <a href="#" class="nav-link">Home page</a>
      <a href="form.html" class="nav-link">Form</a>
    </nav>
  • In the navbar class add 8px of padding to the top and bottom, 16px to the left and right. In the nav-link class add 8px of margin to the left and right.
    • .navbar { padding: 8px 16px; }
      .nav-link { margin-left: 8px; margin-right: 8px;

  • Add a footer class to the footer element. Add a 16 pixel margin to the top of the footer. Put a grey border on the top. Put 8px of padding on the top and bottom and 16px to the left and right.
    • <footer class="footer">Copyright 202x</footer> 
    • .footer {
      margin-top: 16px;
        border-top: 1px solid grey;
        padding: 8px 16px;
      }

  • In the form file add classes to each form field that puts 16 pixels margin below each field.
    • <div class="mb-16px">...</div> 
    • .mb-16px { margin-bottom: 16px; }

  • Set a class on the submit button named "btn". Put a 2 pixel dark blue border around it with rounded corners. Put 4px padding on the top and bottom and 8px on the left and right.
    • <button class="btn" type="submit">Save</button> 
    • .btn {
      border: 2px solid darkblue;
      border-radius: 4px;
      padding: 4px 8px;
    }

Width and height

  • On some elements such as images, buttons, and form input elements you can set width, min-width, max-width, and/or height.
    • We will set the values in px (pixels) or % (percent) of available space.
  • width Set the width of an element.
  • min-width Set the minimum width of an element. 
  • max-width Set the maximum width of an element. 
  • height You can also set the height of some elements like images.

Examples:
  • The image element has a width attribute set at 550 pixels. We'll add a class called "img" to it that will set  max-width to 100%. That means if the browser gets resized to less than 550px, the image will shrink to 100% of the available window instead of exceeding the available window. We'll also add a class that sets an 8px margin around the image.
    • <img src="..." alt="..." width="550" class="img m-8px"> 
    • .img { max-width: 100%; } 
    • .m-8px { margin: 8px; }

  • In the form.html file add class "form-field" to the input and textarea form field elements.
    • <input id="field1" name="field1" type="text" class="form-field"> 
    • <input id="field2" name="field2" type="number" class="form-field"> 
    • <textarea id="field3" name="field3" rows="4" class="form-field"></textarea>
  • The form fields by default are quite narrow so we add a form-field class that assigns a width of 600 pixels, with a maximum width of 100% of the available window.
    • .form-field { 
        width: 600px;
      max-width: 100%; 
    }

Bootstrap

  • There is a popular styling framework called Bootstrap that includes CSS stylesheets, some JavaScript, and a robust set of icons. You can either download the framework into your project or link to their Content Delivering Network. We will do the latter. The CDN links are at getbootstrap.com.

  • Create a new web-project folder. Populate the index.html file with the below. It includes the Bootstrap CDN link in the head element and uses Bootstrap classes. We will go over the Bootstrap classes after the code below.

index.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="icon" type="image/x-icon" href="images/website_icon_128x128.png">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <link href="stylesheets/style.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
      <title>Html Elements</title>
    </head>
    <body>
    
      <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Home Page</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="form.html">Form</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    
      <main class="container-fluid">
        <h1>HTML Elements with Bootstrap styling</h1>
        <hr>
    
        <h2>Text Content</h2>
        <h1>Level 1 Title</h1>
        <h2>Level 2 Title</h2>
        <h3>Level 3 Title</h3>
        <h4>Level 4 Title</h4>
        <h5>Level 5 Title</h5>
        <h6>Level 6 Title</h6>
    
        <hr>
        <h2>Bootstrap colors</h2>
        <p class="text-primary">text-primary</p>
        <p class="text-secondary">text-secondary</p>
        <p class="text-info">text-info</p>
        <p class="text-success">text-success</p>
        <p class="text-warning">text-warning</p>
        <p class="text-danger">text-danger</p>
        <p class="text-primary-emphasis">text-primary-emphasis</p>
        <p class="text-secondary-emphasis">text-secondary-emphasis</p>
        <p class="text-info-emphasis">text-info-emphasis</p>
        <p class="text-success-emphasis">text-success-emphasis</p>
        <p class="text-warning-emphasis">text-warning-emphasis</p>
        <p class="text-danger-emphasis">text-danger-emphasis</p>
        <p class="text-muted">text-muted</p>
        <p class="text-white bg-dark">text-white, bg-dark</p>
    
        <hr>
        <h2>Bootstrap card class</h2>
        <p class="card card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel excepturi suscipit cum natus, ad quis facilis dolorem, accusamus libero unde corrupti, eius maxime aliquam ut perferendis. Dolorem officiis recusandae explicabo.</p>
    
        <hr>
        <h2 class="list-group mb-3">Lists</h2>
        <h3>Unordered list (bullet points):</h3>
        <ul class="list-group mb-3">
          <li class="list-group-item">First list item.</li>
          <li class="list-group-item">Second list item.</li>
          <li class="list-group-item">Third list item.</li>
        </ul>
        <h3>Ordered list (numbered):</h3>
        <ol class="list-group list-group-numbered">
          <li class="list-group-item">First list item.</li>
          <li class="list-group-item">Second list item.</li>
          <li class="list-group-item">Third list item.</li>
        </ol>
        <hr>
    
        <h2>Inline elements</h2>
        <div>
          <b>Bold text</b> 
          <i>Italic text</i><br>
          <small>Smaller text</small>
          <span>Generic inline element</span><br>
          <a href="https://www.example.com">example website</a>
        </div>
        <hr>
    
        <h2>Images</h2>
        <img src="images/html-element.png" alt="HTML element diagram" width="550" class="rounded img-fluid img-fluid img-thumbnail">
    
      </main>
      <footer class="mt-3 py-2 px-3 border-top bg-light">Copyright 202x</footer>
    </body>
    </html>

  • Add a form.html file with Bootstrap classes
form.html
<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="icon" type="image/x-icon" href="images/website_icon_128x128.png">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <link href="stylesheets/style.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
      <title>Html Form</title>
    </head>
    <body>
      <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <div class="container">
          <a class="navbar-brand" href="index.html">Home Page</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="#">Form</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    
      <main class="container">
        <h1 class="my-3">Html Form</h1>
        <hr class="mb-4">
        <form>
          <div class="mb-3">
            <label for="field1" class="form-label">Short text field 1</label>
            <input id="field1" name="field1" type="text" class="form-control">
          </div>
    
          <div class="mb-3">
            <label for="field2" class="form-label">Number field 2</label>
            <input id="field2" name="field2" type="number" class="form-control">
          </div>
    
          <div class="mb-3">
            <label for="field3" class="form-label">Long text field 3</label>
            <textarea id="field3" name="field3" rows="4" class="form-control"></textarea>
          </div>
          <button class="btn btn-secondary" type="submit">Save</button>
        </form>
      </main>
    </body>
    </html>

Bootstrap Colors

Ref: getbootstrap.com/docs > click Utilities: colors
Class names: Set color property text-color, Set background-color property bg-color, Set button color property btn-color
Color names:
  • primary blue #0d6efd;
  • secondary grey #6c757d;
  • success green #198754;
  • danger red #dc3545;
  • warning yellow #ffc107;
  • info light blue #0dcaf0;
  • light light grey #f8f9fa;
  • dark blackish #212529;
  • text-white white #ffffff; 
  • text-muted grey #6c757d;
  • primary-emphasis dark blue #052c65;
  • secondary-emphasis dark grey #2b2f32;
  • success-emphasis dark green #0a3622;
  • danger-emphasis dark red #58151c;
  • warning-emphasis dark yellow #ffc107;
  • info-emphasis dark aqua #0dcaf0;

Example: 
  • <span class="text-danger">There was an error</span> Color text red.
  • <span class="text-danger-emphasis">There was an error</span> Color text dark red.
  • <footer class="bg-light"> Set the footer background color to light grey.
  • <button class="btn btn-secondary"> Set the button color to grey.

Bootstrap margin and padding

Ref: getbootstrap.com/docs > click Utilities: spacing
  • Apply margin or padding spacing around an element.
  • Class name format is: Property[Side]-Size 
    • Property: m for margin | p for padding
    • Side: t for top | b bottom | s start/left | e end/right | x left & right | y top & bottom
      • Side is optional. If side is absent then margin or padding applies to all four sides.
    • Size: 1 4px | 2 8px | 3 16px | 4 24px | 5 48px
    • mt-1 sets margin-top to 4px

Examples: 
  • <div class="m-3"> Adds margin of 16px around all four sides.
  • <div class="mt-3"> Adds margin-top of 16px.
  • <div class="mb-3"> Adds margin-bottom of 16px.
  • <div class="ms-3"> Adds margin-left of 16px.
  • <div class="me-3"> Adds margin-right of 16px.
  • <div class="mx-3"> Adds margin-left and margin-right 16px.
  • <div class="my-3"> Adds margin-top and margin-bottom 16px.
  • <footer class="mt-3 py-2 px-3"> Adds margin-top: 16px, padding top and bottom 8px, padding left and right 16px.

Bootstrap border

Ref: getbootstrap.com/docs > click Utilities: borders
  • border Puts a border on all four sides.
  • border-top Puts a border on the top.
  • border-bottom Puts a border on the bottom.
  • border-start Puts a border on the left side.
  • border-end Puts a border on the right side.

Example: <footer class="border-top">

Bootstrap container

Ref: getbootstrap.com/docs > click Layout: Containers
  • container a responsive fixed-width container. Its max-width changes at 5 breakpoints to set widths: 540px, 720px, 960px, 1140px, 1320px.
  • container-fluid a full width container spanning the entire width of the viewport.

Examples: 
  • <main class="container">
  • <main class="container-fluid">

Bootstrap List Groups

Ref: getbootstrap.com/docs > click Components: list-group
  • list-group Puts a border around the list.
  • list-group-numbered Displays numbers in the list.
  • list-group-item Puts border around the list item and removes the bullet point. 

Unordered List Example:
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>
Ordered List Example:
<ol class="list-group list-group-numbered">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ol>

Bootstrap Images

Ref: getbootstrap.com/docs > click Content: Images
Add the below classes to the img element.
  • img-fluid Makes image responsive. The image will shrink when the screen is narrower than the image.
  • rounded Round the corners.
  • img-thumbnail Add 1px border with rounded corners.

Example: <img src="file-path" alt="alt-text" class="img-fluid img-thumbnail">

Bootstrap Navigation Bar

Ref: getbootstrap.com/docs > click Components: Navbar
  • The Bootstrap navbars are responsive. So when the screen gets narrow the menu items disappear and an icon appears in their place. Clicking the menu icon will display the menu items vertically. The markup is a bit complicated with many variations so we won't copy it here.

Bootstrap Forms

Ref: getbootstrap.com/docs > click Forms: Overview
  • form-label The form-label class adds an 8px bottom margin to the element.
  • form-control Sets the form field element to a block so that it takes up the whole row and adds padding.

Examples:
<div class="mb-3">
  <label for="field1" class="form-label">Short text field 1</label>
  <input id="field1" name="field1" type="text" class="form-control">
</div>
<div class="mb-3">
  <label for="field3" class="form-label">Long text field 3</label>
  <textarea id="field3" name="field3" rows="4" class="form-control"></textarea>
</div>


Open CheatSheet Back To List Next Tutorial