By Sandy Ludosky for Udemy
Interested in more than a beginner’s guide? Check out Sandy’s full Bootstrap course.
Note: This post is part of our “Getting Started” series of free text tutorials on some of our most popular course topics.
To jump to a specific section, click the table of contents below:
If you have never used Bootstrap before, you are probably missing out. Why?
Well documented with a massive support system – The framework is continuously maintained with regular updates and bug fixes. Plus, the documentation is very easy and approachable for newbies.
Responsive and mobile first – Bootstrap comes with great features allowing your design to work across devices, from very small to large.
Free and open-source – This is the biggest advantage of all. Bootstrap offers a free collection of features and tools. It is super simple for developers to create responsive layouts in no time.
This step-by-step tutorial teaches you the fundamentals and tools you need to know to create responsive pages with much less effort.
You’ll learn the power and flexibility of the framework with through step-by-step explanations and examples. We will cover the full range of topics, from the simplest to the more advanced.
What you should know to make the most of this tutorial:
Do you know HTML and CSS?
If the answer is yes, you are in the right place.
You should know how to identify HTML tags to create a webpage, and use CSS (Cascading Stylesheet) to make it pretty.
A beginner level is enough. The Bootstrap documentation is very helpful, with plugins configuration kept simple.
Do you know Bootstrap?
No knowledge of Bootstrap is required. This tutorial is a complete beginner’s guide to get you started with the responsive framework.
What you will learn:
- How to download the Bootstrap files
- The pre-defined CSS classes and HTML styled components
- The fluid grid system
- Mobile first and the responsive utilities
- Leveraging and customizing the Bootstrap resources
- And, a few bonuses!
So, let’s begin!
The project files are available for download as part of this tutorial.
The bootstrap-project.zip includes all the resources you need for you to follow along.
It is divided into chapters corresponding to each section of this tutorial, with a before and an after.
- before: allows you to start from a specific section of the tutorial
- after: includes the completed version of a section
- Plus, a final folder is available if you want to skip ahead and take a sneak peek at the finished product.
We will also show you how to download the bootstrap materials as if you were starting a project from scratch.
First things first – you will head over to the Getting Started page to download the Bootstrap resources.
This is the most basic form of Bootstrap and the easiest way for you to get started.
Once you have downloaded, unzipped and saved everything in a convenient place, we can have a look at what’s inside:
The CSS files
bootstrap.css is the normal version. It can be used at the development stage. bootstrap.min.css is a minified version, less the spaces, tabs and comments. It is lighter, and therefore recommended for production when the site is ready for launch.
The Bootstrap theme is an optional and additional file. It comes also with predefined classes to add 3-D effects with gradients and shadows on some elements (e.g., buttons).
You also have the minified version when your site is ready for deployment.
You need to add bootstrap-min.js for plugins functionalities, such as modal.js, carousel.js, and scrollspy.js, that we’ll use in the project. It also comes in normal and minified versions.
Bootstrap includes a collection of over 250 glyphicons in font format. These should be free.
Glyphicon example below:
You will see other files with the .map extension like this:
You are now all set and ready to start your learning experience with Bootstrap!
We will kick off with the page layout.
Together, we want to build a one-page portfolio with:
An eye-catching banner
A portfolio gallery to showcase work projects, services and customer testimonials.
This should be a great way to get introduced to the Bootstrap library.
- A code editor
- A modern browser
- The Bootstrap and project files
The library includes:
- A powerful fluid grid system
- A large collection of built-in CSS and components, ready to use out the box.
The documentation is organized into sections:
Each page is divided into chapters with code snippets and examples that you can copy and plug right into your source code.
In the project, we will use:
The navbar provided by Bootstrap is available in different variations with lots of add-ons:
Buttons and forms
And, there is more behind the scenes:
- The navbar is responsive and its appearance adapts intelligently as the viewport width increases.
It is absolutely necessary for functionalities like drop-downs and collapsible menus, to name a few.
I know what you’are thinking: it seems like a lot of work.
Well, Bootstrap has already done the hard work for you. We will not be building everything from the ground. We will show you how.
In your code editor, open index.html. You will only need this file open for a moment.
In your index.html file, you will see that we have already made some code available. We will change a few things.
A standard navigation bar is created with
<nav class='navbar navbar-default></nav>
Let’s explain the markup bit by bit:
First, we have the
<nav> element. If you are familiar with HTML5 semantic, you know that this is used to make your page accessible.
<nav> element includes 2 classes: .navbar and .navbar-default
- navbar: represents the main class, common to every navbar component.
- .navbar-default: adds styling with a silver shade, and a combination of gradients and shadows.
There is also .navbar-inverse to obtain an inverted navbar. Try to replace .navbar-default with .navbar-inverse to see the result.
We will move further down to find the
<ul> element with the menu links: home, services and projects.
Now, we are going to start changing things:
Navbar fixed to top
It is easy to achieve with a pre-defined class:
- Inside the <nav> element, add .navbar-fixed-top like so:
This will keep the navbar glued to the top. When you scroll down the page, the navbar stays in place.
Conversely, you can also use .navbar-fixed-bottom to have the navbar fixed to the bottom.
Now, the navbar would look better with the brand name on one side and the menu on the other side. The component alignment will do the job perfectly.
By default, an HTML element is aligned to the left. Adding the class .navbar-right allows you to float the element to the right.
- Inside the parent element
<ul>, add .navbar-right
Now, the menu is automatically flushed to the right.
Next, we include a brand image to replace the brand name Joedoe.com.
- Inside the anchor tag with the class .brand-image, replace the text link JohnDoe.com with an image tag
<img src=”..” alt=”…”>
The image source is images/bootstrap-logo.png
And there you have it: a nice navbar fixed to the top with the Bootstrap logo and the menu on the right.
Now, we move on to the banner.
The jumbotron is a grey box with rounded corners. It will serve to call extra attention to the banner we are about to build.
As shown below:
- copy the code snippet
- add to your source code inside