Bootstrap

Introduction

Bootstrap is a front-end template library that allows web developers to easily create websites, apps, and components. It's free and open source!

Adding the Viewport Meta Tag Press Tab to write more...

To make your website responsive, you'll need to include a meta tag in your HTML. This tells the browser how big your layout should be and where it should scale based on screen size.

The viewport meta tag is added like so:

This will tell the browser that its window should be as wide as possible and no smaller than 640 pixels wide for mobile devices (or 768 pixels for desktop). It also sets what happens when there isn't enough room for everything on the page: either scrollbars are shown or text gets hidden behind them until scrolling becomes necessary again.

Setting up your HTML

• Bootstrap is a responsive framework.

• It has a mobile first approach, which means it’s built with HTML5 and CSS3.

• Bootstrap allows you to use either one or the other, but not both at the same time.

Containers

Containers are the most basic building block in Bootstrap. They are used to wrap around your site's content. Containers can be used to organize and align content on a page, as well as provide space for icons, links and more.

Responsive Breakpoints

Bootstrap uses 12 columns per row, with a max width of 940px (or 980px on small screens). It also has 5 breakpoints that change the number of columns and their widths by percentage.

Bootstrap’s breakpoints are based on a ratio of viewport width to device-width:

• 1x devices: No min-width specified; viewport width is 1024px or higher

• 2x devices: Min-width set at 768px or lower; viewport width must be between 576px and 1024px in order for it to be considered as “low end” (i.e., not high enough)

• 3x devices: Min-width set at 320px or lower; viewport width must be between 320px and 768px in order for it to be considered as “mid range” (i.e., not too low but also not too high either), plus cropping can only occur when inside this range so it makes sense here because you wouldn't have much room left over when resizing within this range anyway!

Columns

In Bootstrap, columns are a component that can be used to create multi-column layouts. You can use these classes in your CSS to create different columns. To make it easier for you, we’ve included a large variety of predefined grid classes that you can use on any element (such as header or footer) and all three tiers of the content area—header, main content and sidebar—to create different layouts for your site.

You may have noticed that some sites use only one row per page but have multiple columns on their pages; this is due to the fact that Bootstrap doesn't provide any default column sizes like 1240 pixels wide by 250 pixels tall so there isn't any harm in doing such thing if it works well with your design goals!

Typography

A mobile first approach means that you should design your site with the smallest screen in mind. This means using a responsive grid, use single column layouts and making sure that all text is readable on smaller screens.

It’s also important to use typography effectively so that your content is more readable for users on any device. Using the right font size and line height will help make your content more accessible for people who have difficulty reading small amounts of text at once or are using assistive technologies like screen readers (which can make seeing large amounts of information hard).

You should also consider using different fonts for different parts of your site if possible — this way people can easily distinguish between sections without having to squint! For example, you might want to use bold or Italicized fonts when writing headlines or titles while keeping regular text in normal serif typefaces such as Garamond Pro Bold Condensed

Bootstrap is awesome

The Bootstrap Framework is a collection of HTML, CSS and JavaScript files that help you build websites. It comes in two flavors: LESS and JS.

The framework was created by Mark Otto in 2011 to provide a base for creating websites quickly and easily. Since then it has been used by millions of people all over the world who want to create responsive websites without having to write any code themselves!

Bootstrap allows developers to focus on what they do best instead of struggling with complicated frameworks that require knowledge about HTML, CSS or JavaScript (or any other programming language).

Conclusion

It was built to help developers build great sites and apps, but it’s also super useful for building your own websites. You can use Bootstrap to design things like forms, buttons, tables and more by following these steps:

• Create a new folder in your web root named "bootstrap".

• Create an index.html file in this directory with the following code:

My Header

• Open index.html in your favorite text editor or IDE (I recommend Visual Studio Code). Then go through each section and change any references from "http://" to "https://". This will ensure that all links open up securely when viewed over HTTPS instead of HTTP which could potentially expose sensitive information if someone were snooping around online looking around your site's source code! Make sure not only is this done on both bootstrap.* files but also all external images referenced throughout as well."