CODEWITHSUNDEEP
htmlcssbootstrap-4margins
phershbe
phershbe

Reputation: 319

Why aren't these margin classes working for me on Bootstrap?

I'm new to Bootstrap and can't get margins between things. I put mb-12 in the navbar class and also mt-12 in the container class for good measure, but nothing is happening. Everything else is working.

I've checked the Bootstrap documentation and posts on here and haven't been able to figure it out.

<!DOCTYPE html>
<html>
<head>
    <Title>The Title</Title>

    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar mb-12 py-4 bg-warning">
        <H1>Words Here</H1>
    </nav>
    <div class="container mt-12">
        <div class="row">
            <div class="col bg-light">Text</div>
            <div class="col bg-primary">
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
            </div>
            <div class="col bg-success">Text</div>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 2592

Answers (2)

Abdelrahman Hatem
Abdelrahman Hatem

Reputation: 1036

Classes mt-12 and mb-12 are not working simply because they are not supported by Bootstrap you can use from 0 to 5 only for padding and margin bootstrap classes.

You can check here

Other way you can custom your own classes mt-12 nd mb-12 with your CSS :

.mb-12{
  margin-bottom: 20px!important; /* You can custom the space you want
}

.mt-12{
  margin-top: 20px!important; /* You can custom the space you want
}

Upvotes: 3

Ishtiaq
Ishtiaq

Reputation: 238

I think you are not using proper class for the margin bottom. For example I used mb-2 and it worked fine. mb-12 is not proper class. You need to consult some tutorials related to bootstrap in order to enhance your skills;

<!DOCTYPE html>
<html>
<head>
    <Title>The Title</Title>

    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar mb-2 py-4 bg-warning">
        <H1>Words Here</H1>
    </nav>
    <div class="container mt-12">
        <div class="row">
            <div class="col bg-light">Text</div>
            <div class="col bg-primary">
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
            </div>
            <div class="col bg-success">Text</div>
        </div>
    </div>
</body>
</html>

There are many helpful tutorials available. For example

Upvotes: 1

Related Questions