Bootstrap 4: Getting started

What is Bootstrap?

Bootstrap contains design templates based on HTML and CSS for loads of components. Components include navigation, typography, tables, buttons and much more… pretty much anything you put into a website really. There are also optional JavaScript plugins / extensions.

The latest release is Bootstrap 4. It is more responsive than previous versions, has a bunch of new components and a faster stylesheet. Other significant changes from previous versions include a move from Less to Sass; dropping support for Internet Explorer 9 (and older); and adding flexbox support (alongside dropping non-flexbox support).

Why Bootstrap?

Bootstrap has been built in such a way that you really only need a beginner level knowledge of HTML and CSS to start using it. This means with very limited experience you are able to create some great looking, responsive sites and apps.

As more and more people predominantly access the web on their phone it is easily argued that developing mobile-first is what we should be doing. Bootstrap have taken a mobile-first approach. Mobile-first styles are part of the core framework.

Despite mobile being arguably the most important it is still essential we create responsive designs for our web development projects. Bootstrap’s CSS is fully responsive so automatically adjusts itself based on the size of the screen a user is viewing your site on. Whether they are using their phone, tablet, laptop or a large desktop display your site will look great.

Importantly Bootstrap is compatible with all modern browsers. These include Chrome, Safari, Firefox, Edge, Internet Explorer 10 and Opera. It even handles those annoying inconsistencies across browsers using Reboot.

Starter Template

<!doctype html>
<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- NEXT IS THE BOOTSTRAP CDN --><link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>My Bootstrap Project!</title>

<!-- NEXT IS THE JAVASCRIPT: JQUERY FIRST, POPPER.JS SECOND, BOOTSTRAP JS THIRD --> <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body>

Template Explanation

HTML5 doctype

<!doctype html>
<html lang="en">

Mobile-first / Responsive

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


.container gives you a responsive container with a fixed width. This means that the max-width is adjusted automatically for each breakpoint (i.e. screen size).

<div class="container">
<p>Your content goes here</p>

.container-fluid gives you a full width container. This means that it is always fills the entire width of the viewport… i.e. its width is always 100%.

<div class="container-fluid">
<p>Your content goes here</p>

Try putting each of the pieces of code above inside the <body> tags of the starter template so you can see what happens.


Further Reading

Like this story? Please follow us on Twitter.

At Welcm we design, develop and support touch screen applications and systems.

If you have a project you would like to discuss please send an enquiry from our contact page, email us at or call us on 01252 950 650.

We also make Visitor Management Easy at



We design, develop and support websites, apps and custom software. Find out more at We also make Visitor Management Easy —

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

We design, develop and support websites, apps and custom software. Find out more at We also make Visitor Management Easy —