Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Corporate website – lesson 1

by Michal Szymanski,

In this lesson, you will learn how to create a basic construction of your project and set up a grid layout.

Final result preview

Step 1

Open index.html file in your project folder (the folder where you have unzipped MDB package).

Step 2

Let's create a basic structure of our project. We'll divide the page into the 3 sections:

<header> - for navigation

<main> - for website content

<footer> - for additional information and links

Paste following code below <body> tag:


<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->    
        

Step 3

We will create navigation bar first. From the MDB documentation (menu on the left, components -> navbars ) grab a Basic Navbar and paste it between <header> tags:


<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <!-- 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 -->

        <!-- Search form -->
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </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 it later.

Navbars come with built-in support for a handful of sub-components. Let me tell you about supported content.

  • .navbar-brand for your company, product, or project name.

  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).

  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.

  • .form-inline for any form controls and actions.

  • .navbar-text for adding vertically centered strings of text.

  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

If you want you can play a little with your new Navbar. Try to modify links names and set up redirections to some already existing in the Internet websites.

Now let's try something more exciting. Let's add a 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 <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 elements we've used above.

All of them are parts of Bootstrap Grid System, which let us create responsive websites adjusted to mobiles, tablets and desktops screens. By using the 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 on full available width

<div class="container"> - will center your content and give it an appropriate side margins. In the current project, we are going to use this one.

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 between 1 and 12.

Examples

2 columns grid


<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
        

3 columns grid


<div class="row">
<div class="col-md-4"> </div> 
<div class="col-md-4"> </div> 
<div class="col-md-4"> </div>
</div>
        

4 columns grid


<div class="col-md-3"> </div> 
<div class="col-md-3"> </div> 
<div class="col-md-3"> </div> 
<div class="col-md-3"> </div>
        

Important: Remember that grid columns should add up to twelve for a row.

Important 2: If you want to use Bootstrap's grid system you always have to use a basic construction with the container (or container-fluid) and row. Otherwise, your column won't work properly.

That's very basic info about Bootstrap Grid. Along the tutorial, you will learn more advanced tricks which let you use the full power of the grid.

Now let's get back to our current project.Click NEXT LESSON button to proceed further.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?

Facebook Twitter Google +

About author


User avatar

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst.

Leave a reply

BrandFlow - Marketing Automation for Bootstrap

Powerful and free software which will automate your Bootstrap project.

Modals creator, scoring system, tag manager & analytics dashboard included in one tool.

Created by MDB Team.

Learn more