HTML The basic bootstrap

Hey all, so this is round 2. I got halfway through my tut and my browser crashed losing everything :S. What am I doing, well im going to teach you how to use bootstrap. What is bootstrap you ask, well that’s a good question. Back in the day programmers had to spend hours making sure a website was responsive but now with bootstrap, we don’t. The best example is imagine going into a car dealer with a blank car, now imagine pressing a button and the paint is done, another button and you now have a 2L V8 engine. That’s bootstrap whereas before you would have to paint the car then put the engine in.

​

Let’s get started​

First thing you need to know, the way I’m teaching you today is not the best way to get bootstrap if you can install it onto your server. this way is safer and speeds up your site.

Copy and paste this into a .html file and let’s go through what we are doing. :-

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <title>Simons Amazing Tut</title>
    </head>
        <body>
            <h1>Simons Amazing Tut</h1>
        </body>
</html>

What are we doing well, first we are telling the browser to let bootstrap do its thing with the

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

We are telling it, don’t shrink don’t do anything as bootstrap is doing this for us, Next, we import out style sheet:-

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

We now have bootstrap installed, you may also notice the H1 tag looks different, you would be right too. The H1 tag has taken its style from the bootstrap style sheet.

Let’s look at a structure​

I will not be going into too much depth at the moment but in a nutshell, you can make a structure as simple as:-

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <title>Simons Amazing Tut</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Simons Amazing Tut</h1>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    One of three columns
                </div>
                <div class="col">
                    One of three columns
                </div>
                <div class="col">
                    One of three columns
                </div>
            </div>
        </div>
    </body>
</html>

What I have now done is put everything inside of a container, this is important as this is how bootstrap keeps everything nice and neat inside, it sets a default size and then adjusts everything inside to match.

Next, we have Row, what we are doing here is we are telling bootstrap that we want everything inside this container to be on the same line.

Now we move onto col, Col is dynamic so if I put 5 cols instead of 3 as I will in the next example they will divide them self equally inside of the row. This is your basic structure, now let me show you what happens when my next row has 5 col’s:-

<!doctype html>

<html lang="en">

    <head>

        <!-- Required meta tags -->

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <title>Simons Amazing Tut</title>

    </head>

    <body>

        <div class="container">

            <div class="row">

                <div class="col">

                    <h1>Simons Amazing Tut</h1>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    One of three columns

                </div>

                <div class="col">

                    One of three columns

                </div>

                <div class="col">

                    One of three columns

                </div>

            </div>

            <div class="row">

                <div class="col">

                    One of Five columns

                </div>

                <div class="col">

                    One of Five columns

                </div>

                <div class="col">

                    One of Five columns

                </div>

                <div class="col">

                    One of Five columns

                </div>

                <div class="col">

                    One of Five columns

                </div>

            </div>

        </div>

    </body>

</html>

Let's end this

Well I hope I haven’t bored you too much, I know this was a bit short but I just wanted to dip your toes into the world of bootstrap and then see if anyone wants to know anything else 😀