Avatar
Nick Schäferhoff
Editor in Chief
. 42 Comments

bootstrap tutorial

Bootstrap is a front-end framework that helps you build mobile responsive websites more quickly and easily. First developed by Twitter, Bootstrap is by now used for anything from developing web applications to WordPress themes. It is also completely free, versatile, and intuitive.

With Bootstrap, you can conjure complex web pages from standard HTML and customize them to your needs. Bootstrap also comes with a number of jQuery plugins that can provide additional functionality such as carousels, buttons, tooltips, and more.

Last, but not least, it gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to creates that are responsive, mobile-first, and compatible with all modern browsers.

P.S. Bootstrap is not a perfect option for complete beginners. Some HTML and CSS knowledge would be helpful. Alternatively, you can use website builders or WordPress to create a website.

Step 1: Setup and overview


In order to use Bootstrap, you first need to integrate it into your development environment, aka web page. For that, you have two different possibilities: load it remotely or download and use Bootstrap locally. However, for both, you first need something to load it into.,

1. Create an HTML page

As a first step, we will create a simple HTML template as a base where we will use Bootstrap. For that, the first thing you want to do is create a folder on your computer or server for the project files. In this case, I will simply call it bootstrap. Here, create a new text file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then paste the code below into it.

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Bootstrap Tutorial Sample Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


</body>
</html>

Don’t forget to save your file before moving on!

2a. Load Bootstrap via CDN

As already explained, Bootstrap consists mainly of style sheets and scripts. As such, they can be loaded in the header and footer of your web page like other assets such as custom fonts. The framework offers a CDN (content delivery network) access path for that. You can find it on the Bootstrap download page, further below.

To get Bootstrap into your page, simply paste the code below into the <head> section of your template.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

When you now save the file, any browser that opens it will automatically load the Bootstrap assets.

Using the remote method is a good idea as many users will already have the framework in the cache of their browser. If that is the case, they won’t have to reload it when coming to your site, leading to faster page loading time. As a consequence, this is the recommended method for live sites.

However, for experimenting and development, or if you want to be independent of an Internet connection, you can also get your own copy of Bootstrap. This is what I am doing for this tutorial because it also results in less code to post.

2b. Host Bootstrap locally

An alternative way to set up Bootstrap is to download it to your hard drive and use the files locally. You find download options in the same place as the links to the remote version. Here, be sure to get the compiled CSS and JS files. You don’t need the source files.

Once you have done so, unzip the file and copy its contents into the same directory as index.html. After that, you can load the Bootstrap CSS into your project like this:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

You will notice that this includes the file path at which to find the Bootstrap file. In your case, make sure your path corresponds to your actual setup. For example, the names of the directories might differ if you downloaded a different version of Bootstrap.

3. Include jQuery

In order to get the full functionality of Bootstrap, you need also to load the jQuery library. Here, too, you have to the possibility to load it remotely or host it locally.

In the first case, you find the link to the latest version of jQuery here. You can use it to load the library into your page by putting the line of code below right before where it says </body> on your page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Alternatively, download jQuery (right-click > Save Link As…), unzip, and put it into the project folder. Then, include it in the same place as your file in this way:

<script src="jquery-3.3.1.min.js"></script>

Again, make sure the path corresponds to your setup.

4. Load Bootstrap JavaScript

The last step in setting up Bootstrap is to load the Bootstrap JavaScript library. These are included in the downloaded version of the framework and you also find links to remote sources in the same place as before. However, we will load it in a different place than the style sheet. Instead of the header, it goes into the page footer, right after the call for jQuery.

You can call it remotely like this:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Or locally like so:

<script src="bootstrap/js/bootstrap.min.js"></script>

5. Put it all together

If you have followed the steps above correctly, you should end up with a file that looks like this for the remote solution:

<!DOCTYPE html>
<html lang="en">
  <head>
  
    <title>Bootstrap Tutorial Sample Page</title>
    <meta charset="utf-8">
    <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" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  </head>
<body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Alternatively, if you are hosting locally, your page template should resemble the code below:

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Bootstrap Tutorial Sample Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  </head>
<body>


<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

If that is what you have and you saved your work, you are now ready to move on to the next step.

 

Step 2: Design your landing page


Alright, that was, admittedly, a lot of preparation work. However, it wasn’t very hard, was it? Plus, now the fun begins.

At the moment, when you navigate to your sample site, you should simply see a blank page. Time to change that.

1. Add a navigation bar

The first thing we want to do is add a navigation bar to the top of the page. This allows your visitors to get around your site and discover the rest of your pages.

For that, we will use the navbar class. This is one of the default elements of Bootstrap. It creates a navigation element that is responsive by default and will automatically collapse on smaller screens. It also offers built-in support for adding branding, color schemes, spacing, and other components.

We will use it like below and post it just below the <body> tag:

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Some explanation of the code:

  • navbar-expand-md — This denotes at which point the navigation bar expands from vertical or hamburger icon to a full-size horizontal bar. In this case, we have set it to medium screens, which, in Bootstrap, is anything greater than 768px.
  • navbar-brand — This is used for your website branding. You can also include a logo image file here.
  • navbar-toggler — Denotes the toggle button for the collapsed menu. The piece data-toggle="collapse" defines that this will turn to a hamburger menu, not to drop-down, which is the other option. It’s important that you define a data-target with a CSS id (defined by the #) and wrap a div with the same name around the actual navbar element.
  • navbar-toggler-icon — As you can probably guess, this creates the icon users click on to open the menu on smaller screens.
  • navbar-nav — The class for the <ul> list element that holds the menu items. The latter are denoted with nav-item and nav-link.

Why am I explaining this so much?

Because that is the point of Bootstrap. You have all of these standards that allow you to create elements with some HTML and CSS classes quickly. You don’t have to write any CSS to provide styling, everything is already set up within Bootstrap. Plus, everything is mobile responsive out of the box! Are you starting to see how helpful this is?

The above is enough to add a navigation bar to your site. However, at the moment, it still looks like very little.

bootstrap tutorial add navigation bar

That’s because it doesn’t have a lot of styling attached to it. While you are able to add default colors (for example, by giving the navbar a class like bg-dark navbar-dark), we instead want to add our own.

2. Include custom CSS

Fortunately, if you want to change the default styling, you don’t have to wade through a large library of style sheets and make the changes by hand. Instead, just like with a WordPress child theme, you are able to add your own CSS files which you can use to overwrite existing styling.

For that, simply create a blank file with your text editor and call it main.css. Save it, then add it to the head section of your Bootstrap site like this:

<link rel="stylesheet" type="text/css" href="main.css">

This is the code for a style sheet that resides in the main directory. If you decide to place your inside the css folder, be sure to include the correct path in the link.

From here, you are able to add custom CSS to your site. For example, to style the navigation bar and its elements, you could use markup like this:

body {
  padding: 0;
  margin: 0;
  background: #f2f6e9;
}

/*--- navigation bar ---*/

.navbar {
  background:#6ab446;
}

.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}

.nav-link {
  margin-right: 1em !important;
}

.nav-link:hover {
  color: #000;
}

.navbar-collapse {
  justify-content: flex-end;
}

And here is the result:

bootstrap tutorial style navigation bar

Looks better than before, doesn’t it?

3. Create a page content container

After the navigation bar, the next thing you want is a container for the page content. This is really easy in Bootstrap as all you need for it is this underneath the navbar tag:

<header class="page-header header container-fluid">

</header>

Notice the container-fluid class. This is another one of those default Bootstrap classes. Applying it to the div element automatically applies a bunch of CSS to it.

The -fluid part makes sure the container stretches across the entire width of the screen. There’s also just a container, which has fixed widths applied to it, so there will always be space on both sides of the screen.

However, if you now reload the page, you still won’t see anything (unless you use the developer tools). That’s because you only created an empty HTML element. This will start changing now.

4. Add background image and custom JavaScript

As the next step in this Bootstrap tutorial, we want to include a full-screen background image for our landing page header. For that, we will have to use some jQuery to make the image stretch all the way across the screen.

You do that the same way you include custom CSS. First, create a text file of the name main.js and place it inside your site folder. Then, call it before the closing </body> tag inside index.html.

<script src="main.js"></script>

After that, you can copy and paste this piece of code to make the <header> element stretch across the entire screen:

$(document).ready(function(){
  $('.header').height($(window).height());
})

Then, the only thing that’s left is to set a background image. You can do this like so inside main.css:

.header {
  background-image: url('images/header-background.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

If you place an image of sufficient size at the location specified by the path above, you will achieve a result similar to this:

bootstrap tutorial include header background image

5. Add an Overlay

To make the background image extra stylish, we will also add an overlay. For that, you will create another div element inside the one you just included earlier.

<div class="overlay"></div>

Then, you can add the following in your custom CSS file:

.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
}

This will create this nice overlay for the image you input earlier:

bootstrap tutorial add overlay

6. Include a page title and body text

Now you probably want to add a page title in the form of a heading plus some body text. That way, your visitors will know immediately which site they are on and what they can expect from it.

To create those, simply add this snippet inside the container you set up in the last step, below the overlay:

<div class="description">
  <h1>Welcome to the Landing Page!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

After that, add the following markup to main.css.

.description {
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -55%);
  text-align: center;
}

.description h1 {
  color: #6ab446;
}

.description p {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
}

When you do, the landing page now looks like this:

bootstrap tutorial add page title and description

It’s really starting to come together, isn’t it?

7. Create a CTA button

No landing page is complete without a call to action, most often in the form of a button. For that reason, we would be amiss not to include how to create one in this Bootstrap tutorial.

The framework offers plenty of tools to create buttons quickly and easily. You can find a lot of examples here. In my case, I add the following markup right below the page content inside the <description> container:

<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>

In addition to that, I add this CSS to main.css:

.description button {
  border:1px solid #6ab446;
  background:#6ab446;
  border-radius: 0;
  color:#fff;
}

.description button:hover {
  border:1px solid #fff;
  background:#fff;
  color:#000;
}

After saving and reloading, it looks like this:

bootstrap tutorial add call to action button

8. Set up a three-column section

I am already quite satisfied with how things are shaping up. However, we are not done with the page yet. Next up, we want to create three columns below the main content for additional information. This is a specialty of Bootstrap since it plays to its strength: creating a grid. Here’s how to do that in this case:

<div class="container features">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h3 class="feature-title">Lorem ipsum</h3>
      <img src="images/column-1.jpg" class="img-fluid">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h3 class="feature-title">Lorem ipsum</h3>
      <img src="images/column-2.jpg" class="img-fluid">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">		
    </div>
  </div> 
</div>

The first thing you will notice is the row element. You need this whenever creating columns to act as a container for the grid.

As for the columns, they all have several classes: col-lg-4, col-md-4 and col-sm-12. These denote that we are dealing with columns and the size they will have on different screens.

To understand this, you need to know that in a Bootstrap grid, all columns in one row always add up to the number 12. So, giving them the classes above means that they will take up one-third of the screen on large and medium screens (12 divided by 3 is 4) but the entire screen on small devices (12 out of 12 columns).

Makes sense, doesn’t it?

You will also notice that I included images and added the .image-fluid class to them. This is to make them responsive so that they scale along with a screen that the page is viewed on.

In addition to that, you have the following styling included in the usual place:

.features {
  margin: 4em auto;
  padding: 1em;
  position: relative;
}

.feature-title {
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.features img {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
}

When added below the main content and saved, it looks like this:

bootstrap tutorial add three column section

9. Add a contact form

You will notice that one of the new fields is still empty. This was on purpose because we want to add a contact form to it. This is a very normal practice for landing pages to allow visitors to get in touch.

Creating a contact form in Bootstrap is quite easy:

<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
  <input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
  <input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
  <textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">

By now, I shouldn’t have to explain the markup to create columns anymore. Here’s what the rest of the markup means:

  • form-group — Used to wrap around form fields for formatting.
  • form-control — Denotes form fields such as inputs, text areas etc.

There is a lot more you can do with forms, which you can find out in the documentation. However, for demonstration purposes, the above is enough. Place it inside the remaining empty column and then add this styling in main.css:

.features .form-control,
.features input {
    border-radius: 0;
}

.features .btn {
  background-color: #589b37;
  border: 1px solid #589b37;
  color: #fff;
  margin-top: 20px;
}

.features .btn:hover {
  background-color: #333;
  border: 1px solid #333;
}

When you do, you get a form like this:

bootstrap tutorial include contact form

10. Create a two-column footer

Alright, we are now getting towards the end of the Bootstrap tutorial. The last thing you want to add to your landing page is a footer section with two columns. By now, this shouldn’t pose much of a problem for you anymore.

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-12">
      <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h6 class="text-uppercase font-weight-bold">Contact</h6>
      <p>1640 Riverside Drive, Hill Valley, California
      <br/>[email protected]
      <br/>+ 01 234 567 88
      <br/>+ 01 234 567 89</p>
    </div>
  </div>
  <div class="footer-copyright text-center">© 2019 Copyright: MyWebsite.com</div>
</footer>

Besides the usual grid markup, this section highlights a few possibilities to modify typography with Bootstrap:

  • text-uppercase
  • font-weight-bold
  • text-center

It should be pretty clear from the names of the classes what they do. You can find more information about Bootstrap and typography here.

In addition to the above, you can use styling like this:

.page-footer {
  background-color: #222;
  color: #ccc;
  padding: 60px 0 30px;
}

.footer-copyright {
  color: #666;
  padding: 40px 0;
}

This results in a beautiful footer that looks like so:

bootstrap tutorial include page footer

11. Add media queries

The page is basically ready by now. It is also fully responsible. However, in the mobile view of the browser, the upper section doesn’t come out quite right yet.

bootstrap tutorial error on mobile design

However, no worries, you can correct that quite easily with a simple media query. Unless you are using SASS for compiling your Bootstrap site, these work the same way as in other instances. You just need to keep in mind the preset breakpoints included in Bootstrap.

As a consequence, to correct the above problem, you can simply include a piece of code like this:

@media (max-width: 575.98px) {

  .description {
    left: 0;
    padding: 0 15px;
    position: absolute;
    top: 10%;
    transform: none;
    text-align: center;
  }
  
  .description h1 {
    font-size: 2em;
  }
  
  .description p {
    font-size: 1.2rem;
  }
  
  .features {
    margin: 0;
  }

}

After that, everything is as it should be:

bootstrap tutorial add media query

12. Upload Your Website to a Web Host

If you have been following along, you should now be set with a finished website that also on mobile and is completely responsive.

However, so far, nobody but you can see it. To change that, you need a web host and domain. That way, people can input your website address into their browser bar and then access your newly minted Bootstrap website online.

In order to allow them to do so, you need to upload the site to your server. You can do that with an FTP client like FileZilla. Collect your FTP host address, username, and password from your hosting provider to connect to your server remotely. When you do, you should be able to see the files and directories currently on there.

upload bootstrap website to server via ftp

Navigate to the directory your domain is pointed to (usually the root directory). Once you have done that, simply find the folder with your Bootstrap files on your hard drive, mark all the files inside, and then drag them over to the server to start the upload. The process will take a while to finish depending on your connection speed as well as number and size of files.

However, once it’s done, when you access your domain, you should be able to see the finished site in your browser window.

bootstrap tutorial finished landing page

 

Not bad for a few lines of code, right?

Speaking of which, if you want to have the entire code for the page including the custom CSS and JavaScript, you can download them all here. With this, you have all you need to create a landing page with Bootstrap.

Conclusion

Bootstrap is an open-source, front-end development framework anyone can use for free. It allows you to quickly prototype designs, create web pages, and generally hit the ground running.

As you have seen in this Bootstrap tutorial for beginners, it only needs basic knowledge of HTML, CSS, and some optional jQuery. While not as comfortable as using WordPress, Bootstrap is still a valid alternative to create a website.

By now, you know how to set up and install Bootstrap and its components, create a simple landing page, include some basic content, and style it. You can create navigation menus, set background images, include buttons, columns, and contact forms.

Of course, there is more to learn.

Thanks to this basic Bootstrap tutorial, you now know enough to keep moving forward by yourself. If you want to dive deeper into the framework, a good starting point is W3Schools. Aside from that, we hope you liked this beginner tutorial and would like to hear your thoughts and experiences about it.

Do you have any thoughts on the Bootstrap tutorial above? Questions, comments, requests? Let us know in the comments section below!


Want to ask a question or leave a comment?


Ask me anything

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • +

42 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  1. Avatar

    Hey there! Is it possible to combine the remote files and downloaded files? Like I put in the remote code for jQuery but the downloaded code for bootstrap?

  2. Avatar

    Hi,

    I should give one more update. None of the refresh functions work consistently. Perhaps with a server side refresh it might work. I don’t know if I am correct in assuming that the JQuery and JavaScript stay loaded for all of the pages, but simply calling a function at onLoad in the body tag and including setTimeout inside of that function to redirect to a duplicate page after two seconds (apparently enough time to be sure jQuery and all the rest have arrived) opens that duplicate page with the background image fully loaded. All of the subsequent pages load their background images properly as well although if you start on one of them, you might have the same problem. I hope I haven’t gone on too long here, but since this is such a valuable tutorial, I felt some obligation to return the favor by sharing this experience.

    Thanks again…

  3. Avatar

    Hi,

    I guess I spoke too soon. The automatic reload function seemed to work there about fifteen times in a row, but then the initial page stopped fully loading again until refresh. I haven’t tried other browsers, but there doesn’t seem to be any reliable solution other than to include a specific reminder for the user to refresh the page. I have some notion that the JavaScript: JQuery, Bootstrap and then the local main.js just don’t all get going before the page finishes its initial load, but that they do seem to be available when you click on to the next page, which is formatted in the same way with the same navigation bar arrangement and so forth. I don’t have the faintest idea at the point what to do about it, and any suggestion would be welcome. The overall introduction to this type of Bootstrap-assisted page setup is still excellent – a quantum leap forward.

    Thanks again…

  4. Avatar

    This was an extremely helpful tutorial. This is an excellent starting point simply to get a starting grip on what is going on, and everything works fine both remotely and locally with additional pages added and linked to and various other pictures and features added.. There was one serious bug, however, at least with my up-to-date Firefox browser: Any page that was the one initially opened only loaded the background picture halfway until you refreshed the page. Subsequent pages linked to loaded their full background pictures. I gathered that this had something to do with the full loading of all the JavaScript. I never solved that per se, and if you have a suggestion, it would be welcome. However, the workaround, courtesy of https://stackoverflow.com/questions/6985507/one-time-page-refresh-after-first-page-load, which I located after many hours, is to implement an automatic one time refresh tacked on at the bottom of the page before :

    $(document).ready(function(){
    //Check if the current URL contains ‘#’
    if(document.URL.indexOf(“#”)==-1){
    // Set the URL to whatever it was plus “#”.
    url = document.URL+”#”;
    location = “#”;
    //Reload the page
    location.reload(true);
    }
    });

    This is now worked fine after being tested repeatedly both on my own modified site and on your downloaded code with the included picture of the strawberries, which had also only been loading halfway.

    Thanks again…

    1. Avatar

      Hey Paul, in the case of the above example, you need to delete the part of the CSS where it says:

      .navbar-collapse {
      justify-content: flex-end;
      }

  5. Avatar

    Hi Nick, I wish all the best for you for your effort. I followed the same steps of the tutorial. After adding the image, the navbar went down to the middle of the left part of the page and the image went right in two third of the page.

    1. Avatar

      Hey Maureen, you can control image size via CSS, for example:

      img {
      height: 50%;
      width: 50%;
      }

      Make sure to use selectors specific to your image.

      1. Avatar

        Hey Nick, thank you for this incredible tutorial!!

        I would like to know how to reduce the size of the Header Container background image
        Is it possible to do it via css?
        Thank you

        1. Avatar

          Sorry, I’ve realized that what I really need is to change the HEIGHT of the HEADER container.
          How would you do that?
          Thanks again
          Mauricio

          1. Avatar

            And now after reviewing the whole process, I’ve found that little piece of javascript that sets the header size to the whole page.

            Please disregard all of my questions
            I Should have read better before asking
            Thanks!!

  6. Avatar

    Lots of missing information from this tutorial. You make references to previous tags that aren’t mentioned. You don’t give the complete code to see how it ends up being structured. Snippets are useful but not without context. On the jQuery file you can’t just click the link on the jQuery website. You have to right click and save as to grab the .js file. Also you don’t explain the differences between using as your container versus . What’s disappointing is this is one of the better bootstrap tutorials I’ve found but it is still lacking.

    1. Avatar

      Hey Thomas, you can download the entire code at the end of the article. We deliberately didn’t post it all again as that would have made the post too long. Instead, you can have it inside a file on your own hard drive.
      Thanks for the hint about right clicking to get the jquery file. I have changed the post accordingly.
      Unfortunately, the code for the two different containers was not displayed in your comment so I can not address this issue.
      However, thanks for your input!

  7. Avatar

    I am very grateful for this tutorial. Before coming here, I was looking element by element at the bootstrap documentation and felt I was getting nowhere. Sometimes it takes something just being laid plainly and complication-free before you in order to make sense of it. I intend to modify the template provided and begin learning more from that point.

    1. Avatar
      Nick Schäferhoff Verified

      Glad you liked it Carlos! I agree that it’s sometimes possible to miss the forest for the trees. Every now and then it helps to have an example to work off of. Feel free to get in touch if you have any questions about the code!