Where can I try Bootstrap 4?

code.makery

Up to this point we have programmed all HTML and CSS ourselves from scratch. Our project that Web portfolio, already has some HTML pages with some content, unfinished navigation and some styling.

Our project would have to be further developed by hand into a complete and modern website a huge amount of work! Here is a list of the few most important tasks that we still have to tackle (don't worry, there is a solution!):

  • Adjust font and text size for all headings and sections.
  • Design buttons, text fields, etc. nicely (they look quite out of date by default).
  • Define spacing and position elements on the page (is very difficult).
  • Define a uniform style so that all different browsers display roughly the same thing.
  • Optimize the websites for different screen sizes (mobile, tablet and desktop)
  • And a lot more ...

Fortunately, we are not alone with these tasks - this affects more or less all web designers. Since it hardly makes sense if everyone solves the same tasks over and over again, so-called Frameworks that make this job a lot easier.

The most famous of these Frameworks called Bootstrap and was developed by Twitter. The Bootstrap framework is a huge relief for us as web developers. We will discover step-by-step what we are dealing with Bootstrap can do. But here's a taste of the effects Bootstrap can have on our project:

With Bootstrap Not only do the elements look better, they are also displayed in practically the same way in all browsers.

Use bootstrap

documentation

Bootstrap's official documentation is the best place to see what you can do with Bootstrap. You should save these web pages somewhere because you will have to look them up again and again.

Include Bootstrap CSS

The most important part of Bootstrap consists of a large CSS. There is also a JavaScript file for more complex elements. We'll only be using the CSS file for now.

Now we want to integrate the Bootstrap CSS into our HTML pages:

  1. Open the Bootstrap website. You can see there that there are several ways to download Bootstrap. We choose the variant via the BootstrapCDN. So we don't actually have to download anything, just specify in the HTML where the additional CSS file is located. It is then sent directly from the CDN-Servers downloaded. CDN-Servers are servers that are distributed all over the world so that they can deliver a file very quickly.

  2. So copy from the section BootstrapCDN the first line with the element.

  3. Include the element in your HTML pages. The important thing is that you add it above our element for the file. This makes ours more important. This means that we can override CSS rules from the Bootstrap CSS with our own rules.

  4. Copy the three lines for JS, Popper.js, and jQuery.

  5. Insert these JavaScript files at the bottom of the body area of ​​your HTML page.

Your HTML files should now look something like this (possibly with a newer version number and a few “integrity” numbers from Bootstrap):

index.html
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/main.css"> <title>Web Portfolio von Marco</title> </head> <body> <!-- Hier steht irgend ein Inhalt --> </body> </html>

How does Bootstrap work?

Some Styles from the Bootstrap CSS are applied directly to HTML elements. For example, let's look at a link in Chrome DevTools let's see how the link color is changed in the Bootstrap CSS and removed with the underscore:

Many bootstrap styles are only activated if you have a corresponding CSS class adds.

Use bootstrap classes

As an example, let's look at how to use Bootstrap to change text alignment. Refer to the Bootstrap documentation under Alignment Classes for a quick guide to text alignment.

So if we wanted to center the title, for example, we would have to add the class:

<h2 class="text-center">Willkommen!</h2>

Our title already has an attribute. If we want to center this title as well, we can add that as a second class. Multiple CSS classes are always separated by spaces:

<h1 class="title text-center">Web Portfolio von Marco</h1>

But what if we want to center a larger part of our website? It would be quite tedious if we had to add one to each element individually. It is therefore possible to add a class to a parent element. Many CSS rules can be passed on to all sub-elements.

We could even add a class on the element. This will center everything right away. But if you only want to center a part, you often use so-called elements.

div elements

The element is used to group elements into a block. For Bootstrap, we'll be using elements quite often to apply styles to an entire section of the page.

A key CSS class in Bootstrap is. It automatically adapts the content to the width of the page and ensures a reasonable distance to the edge. You should always have an element with the class on your bootstrap page. Read the description of Container on the Bootstrap website.

We are now packing the main content of our start page between and. (We will deal specifically with the navigation below.)

The part of your main page should now look like this (make sure that the elements are neatly indented so that the code remains clear):

index.html
<body> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/projekte/">Projekte</a></li> <li><a href="/kontakt/">Kontakt</a></li> </ul> <h1 class="title">Web Portfolio von Marco</h1> <h2>Willkommen!</h2> <p>Schön, dass Sie auf meiner Seite vorbeischauen.</p> <p>Sie können sich ruhig etwas umsehen. Im Blog dokumentiere ich meine Erfahrungen beim Programmieren. Daneben können Sie auch meine Webprojekte anschauen. Viel Spass.</p> <img src="marco.jpg" alt="Foto von mir"> <p>Marco :-)</p> </body>

The elements begin in the browser always on a new line. Because they take up the entire available width, such elements are also called block elements.

span elements

In contrast to elements, an element does not start on a new line. An element is only as wide as its content. Such elements are also called inline elements because they are embedded within a line.

Here is an example of how you could use an element:

I would like to emphasize these words .

Navigation with Bootstrap

Now we finally want to make the navigation more beautiful with the help of Bootstrap. A navbar is described in the bootstrap documentation. However, the example there is very complex and includes menus, text fields and buttons. We choose a slightly simpler variant.

Copy the following code for navigation:

index.html
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMenu"> <ul class="navbar-nav"> <li><a class="nav-link active" href="/">Home</a></li> <li><a class="nav-link" href="/blog/">Blog</a></li> <li><a class="nav-link" href="/projects/">Projekte</a></li> <li><a class="nav-link" href="/contact/">Kontakt</a></li> </ul> </div> </div> </nav>

Explanation

  1. The outermost element with as a class causes a bar to be displayed at the top of the margin. A is actually exactly the same as a, except that you give a little hint to search engines that a navigation is coming.

  2. The next with the class causes the distances from the edge to be the same as for our main content. Note the closing day that goes with it.

  3. The element with class is the button in the mobile view to expand the menu. Reduce the width of the browser window. Then the button should appear.

  4. In contrast to the previous variant, we have added a class to each link. This ensures that the link is given the appropriate style in the navigation.

  5. Note: That active The navigation element is marked with the additional class. This will then appear highlighted.

It should now look something like this:

Dark variant

There are other variants of bootstrap navigation:

To enable this, change the class to and to.

Optimize for mobile

With bootstrap and the navigation, the website looks quite appealing in a desktop browser. Try visiting the website on a mobile phone (you will need to publish the page).

You will find that the page is either cut off or the navigation is far too small:

With an information in the area, we can tell the mobile browsers that they should display the page properly:

<head> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"> <title>Web Portfolio von Marco</title> </head>

Now it should look something like this:

Bootstrap is designed to work well on mobile screens. In the screenshot above you can see how the navigation is automatically displayed one below the other as soon as the screen width becomes too small. You can also try this out by simply minimizing the browser window.

A web design that reacts to the screen size is called responsive web design.

Note: Bootstrap also automatically folds the navigation together in the mobile view. The JavaScript files are responsible for this, which we copied before the closing tag.

Bootstrap and navigation on all pages

So far we've only added Bootstrap and navigation to our homepage. The goal is, of course, that they are involved on all sides.

With a little adjustment we can copy the code from the start page to all other pages (blog, blog entries, contact, etc.):

1. Insert viewport and bootstrap CSS

Copy the line with the and the line with the Bootstrap CSS from the area of ​​the start page and paste them into all other pages:

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

2. Insert JavaScript

Copy the links to the JavaScript files from the end of the area on the start page and paste them into all other pages:

<body> <!-- Hier steht irgend ein Inhalt --> </body>

3. Insert navigation

Copy the entire navigation area from the start page and paste it into all other pages. Make sure that you add the class to the current link:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMenu"> <ul class="navbar-nav"> <li><a class="nav-link" href="/">Home</a></li> <li><a class="nav-link active" href="/blog/">Blog</a></li> <li><a class="nav-link" href="/projects/">Projekte</a></li> <li><a class="nav-link" href="/contact/">Kontakt</a></li> </ul> </div> </div> </nav>

4. Insert container div

When you open the subpages in the browser, you will notice that the margins are not yet correct. To correct that, we have to surround all of the content (everything below the navigation) with one. This must have the class. Correct this in all subpages:

[... Navigation ...] [... Page content ...]

5. Testing

Now it is important that you visit all the pages and the Test links carefully!

Next, take a look at your code and make sure that that HTML nicely tidied up is. Whenever an HTML tag is opened, the next line should be indented. The closing day is then moved back to the left.

How next?

→ Learn the next steps.