Author: Michal Szymanski
In this lesson, you will learn how to create a basic structure of your project and set up a grid layout.
Final result previewNote:
If you haven't yet downloaded the MDBootstrap package, please watch and follow this short video.
Already downloaded and installed? Great. Let's start the tutorial!
Step 1
Open the index.html file in your project folder (the folder where you have unzipped the MDB
package).
Step 2
Let's create a basic structure for our project. We'll divide the page into the following 3 sections:
<header> - for navigation
<main> - for website content
<footer> - for additional information and links
Paste the following code below the
<body> tag:
<!--Main Navigation-->
<header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
</main>
<!--Main layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
Step 3
We will create a
navigation bar first. From the MDB documentation (menu on the left, Navigation ->
navbars ) grab a Basic
Navbar and paste it between the
<header> tags:
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
Save the file and open it in the browser. You will see an indigo navigation bar on the top of the page.
That was easy, wasn't it? Of course, our navigation requires a few modifications, but we'll take care of ttah later.
Navbars come with built-in support for a handful of sub-components. Let me tell you about this supported content.
-
.navbar-brandfor your company, product, or project name. -
.navbar-navfor full-height and lightweight navigation (including support for dropdowns). -
.navbar-togglerfor use with our collapse plugin and other navigation toggling behaviors. -
.form-inlinefor any form controls and actions. -
.navbar-textfor adding vertically centered strings of text. -
.collapse.navbar-collapsefor grouping and hiding navbar contents by a parent breakpoint.
If you wish, you can play a little with your new Navbar. Try to modify the link names and set up redirections to some already existing websites.
Now let's try something more exciting. Let's add some content to our website.
Step 4
Before we do that, first we have to structure our project. We'll use a Bootstrap grid for that.
Paste the following code between the
<main> tags:
<!--Main container-->
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-7">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-5">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Main container-->
Now let's have a look at the elements that we've used above.
All of them are parts of the Bootstrap Grid System, which allows us to create responsive websites for mobile, tablet and desktop screens. By using the code snippet above, you've just created a responsive layout for your website, which will be displayed perfectly on all kind of devices!
But what these elements actually do?
Container
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers:
<div class="container-fluid"> - will display your content with the full available width
<div class="container"> - will center your content and give it appropriate side margins. In
the current project, we are going to use this
<div class="container">.
Row
Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally, use
<div class="row">.
Columns
Bootstrap's grid system allows up to 12 columns across the page. To create a column use a special class
<div class="col-md-*>, where "*" is the number of columns between 1 and 12.
Examples
2 column grid
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
3 column grid
<div class="row">
<div class="col-md-4"> </div>
<div class="col-md-4"> </div>
<div class="col-md-4"> </div>
</div>
4 column grid
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
</div>
Important: Remember that grid columns should add up to twelve within a row.
Important 2: If you want to use Bootstrap's grid system you always have to use this basic construction with the container (or container-fluid) and rows. Otherwise, your column won't work properly.
That's some very basic info about the Bootstrap Grid. During the tutorial, you will learn some more advanced tricks which let you use the full power of the grid.
Now let's get back to our current project. Click the NEXT LESSON button to proceed further.
Previous lesson Live preview Next lesson
Spread the word:
