Bootstrap
Bootstrap, developed by Twitter, is a completely free framework uses to help build responsive mobile websites more quickly and easily.
Get started with HTML
Start with HTML Template layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Template</title>
</head>
<body>
<!-- HTML Element Tags -->
</body>
</html>
Get started with Bootstrap
Intergrating Bootstrap into HTML Template
Add BootstrapCDN external stylesheet <link> inside the <head> ... </head> element.
Place the javascript <script> files right before the closing of the ></body> tag in the order it appears in the example code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Template</title>
<!-- Link an external Bootstrap 4.4.1 CSS file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- HTML Element Tags -->
<!-- Link an external jQuery (3.4.1), Popper (1.16.0) and Bootstrap (4.4.1) Javascript files -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- other Javascript files go here -->
</body>
</html>
Most commonly used features:
- Grid system - build layouts using containers, rows, and columns to layout and align content.
- Bootstrap Containers - Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
- Navigation brand and Navigation menu - support for branding, navigation, and more
- Cards - A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
- Jumbotron - component for showcasing hero unit style content.
- Buttons - custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
- CSS Flexbox - responsive container layout which automatically arranged based upon screen size.
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Learn how to integrate the framework into a website or content management.
Additional Cources
Learn to code Hypertext Markup Language using online tools and resources to build and deploy a website. You will learn to structure and define the content as, for example, headings, paragraphs, or images to tell your story.
The 2-hour session is designed to provide a foundational understanding of HTML to arrange site content and layout.
HTML & CSS
HTML Hypertext Markup Language provides basic structure to the site and CSS Cascading Style Sheets, is used to style the appearance of content-using, for example, fonts or colors.
Learn how to add style and pizzazz into a website or content management template.
Quality Assurance (QA)
Learn how to fix webpage issues on different types of screen sizes, browsers, operating systems, and other platforms.
We will examine the design precess and testing for the best website experience to the particular user base.