Setup a Boostrap Website

  1. Manual Creation of a Bootstrap Wesbite
  2. Layout with Flexbox Grid
  3. A BootstrapMade Wesbite
  4. Definitions
  5. References/Links

Manual Creation of a Bootstrap Wesbite

Reference: BootStrap 5.3 Getting Started

  1. First make sure the first line of every web page defines the html doctype:
    <!doctype html>
    Bootstrap requires the use of the HTML5 doctype. Without it, there will be incomplete styling.

  2. Also include the following line, in the HEAD section of every html page on the site:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    This tag helps control the layout on mobile browsers by setting the viewport width to match the device's screen width and scaling the content appropriately.

  3. Add a Link to include the Content Style Sheet (CSS) from the Content Delivery Network (CDN), this should be placed within the HEAD section of the web page:
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  4. Include SCRIPT references to the Javascript (JS) bundle, from the CDN, which must be placed anywhere in the BODY section of the web page:
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  5. If going to use use dropdowns, popovers, or tooltips then include SCRIPT references for Popper, from the CDN, which must also be placed anywhere in the BODY section of the web page:
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    Note: poper.js.org has now been redirected to, and replaced by, floating-ui
    That is the pure basics for a Bootstrap web page

  6. Next stage is to build a layout with the mobile-first flexbox grid.

Layout with Flexbox Grid

Flexbox, the flexible box layout module, is a one-dimensional layout mmodule - in that it deals with either a column or a row.
CSS Grid Layout is a twon-dimensional module, as it controls columns and rows together.
Flexbox grid has a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
The division (DIV) container tag is used to group together, and style, various elements of the html pages, by defining a class type such as:
<div class="container text-center">
<div class="row">
<div class="col">

A BootstrapMade Wesbite

  1. Choose a template from BootstrapMade, or one of the distributers, such as ThemeWagon

  2. Download the template, and extract all files into your new webroot directory:
    eg. Windows: D:\data\mysite.com
    eg. Unix: /opt/data/mysite.com

  3. If you don't want to setup a web server, and set the DocumentRoot to the above directory, then map the directory to a new drive letter (for windows) or root directory (for Uniz):
    Windows: subst W: C:\mysite.com
    Unix: ln -s /opt/data/mysite.com /mysite.com

  4. Open index.html from the base of the website directory, and you can now browse the site fully

  5. Edit each html page (eg. usually such files as index, about, faq, blog, contact, portfolio, services), to reflect the content of your won site and it's offerings.

  6. Replace all image files with your own ones - usually in assets/img, or image or img subdirectories.

  7. It's best to copy one page to template.html - and define all header, nav, and footer components.
    Then copy these to any new page you wish to add to the site, and link to it.

  8. Sometimes it may be necessary to override some of the bootstrap settings, as they prevent normal HTML tags to work
    eg. a TABLE section in one site was unable to display the dividing cell lines.
    To overcome this add additonal a style section to the HEAD portion of the html page: 
    
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
    </style>
  9. Another issue may be that because of the hard set top menu bars, that any inline links to anchors, will result in the first 2-3 lines behing hidden by the nav bar.
    To fix this we need to add a new STYLE section to the HEAD part of the html page:
    
    <style>
        .anchor-target {
            position: relative;
        }
        
        .anchor-target::before {
            content: "";
            display: block;
            height: 70px; /* Adjust this value based on the height of your fixed navbar */
            margin-top: -70px; /* Negative value of the height */
        }
    </style>
    And then change the html to:
    
<A HREF="#myanchor">Section N</A>

<H3 id="myanchor" class="anchor-target">Section N</H3>
  10. To ensure the lines are wrapped within the table, and also to set a min size for a column, eg. first column in this example: 
    
    <style>
    .content {
        overflow-x: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        display: table;
        table-layout: auto; /* Add this to allow the table to adjust column width */
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
    }
    th {
        background-color: #f2f2f2;
    }
    td {
        max-width: none; /* Remove the max-width constraint */
    }
    </style>

Definitions

Bootstrap:
  • is a popular front-end/CCS framework used for developing responsive and mobile-first websites.
  • it provides a comprehensive set of tools and components that make web development faster and easier.
  • it includes pre-styled CSS classes, a responsive grid system, and powerful JavaScript plugins.
  • it allows developers to create visually appealing and functional web pages with minimal effort
Content Delivery Network (CDN):
- is a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.

Webpack:
- is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

BootstrapMade:
- is a website that offers a wide range of Bootstrap templates and themes, that were built using the Bootstrap framework.
- templates are designed to help developers and designers create responsive and visually appealing websites quickly and efficiently.
- provides both free templates, with limited functionality and premium templates
- free templates are usually very limited to plain html with no forms, or even central headers and footers - the premium templates usually include the forms and php, so the headers and footers can be defined in one place only

  1. https://getbootstrap.com/
  2. Bootstrap 5.3 Downloads
  3. Viewport Meta Tag Description
  4. Floating UI (has replaced popper)
  5. Webpack
  6. Bootstrap Gird Layout (using Flexbox)
  7. Basic Concepts of Flexbox
  8. Reboot: to correct inconsistencies across browsers and devices
  9. CSS Grid Layout
  10. BootstrapMade
  11. ThemeWagon