Why is the bootstrap 4 offset sample not working?

Question

I am trying to get bootstrap 4.1 to offset my columns. I have copied the sample from here. My page has:

@page
@{
    Layout = "./Shared/_NoLayout";
}

@model OVNew.Pages.TestModel

<h2>Test</h2>

<div class="container ">
    <div class="row">
        <div class="col-md-4 test-div">.col-md-4</div>
        <div class="col-md-4 offset-md-4 test-div">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3 test-div">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3 test-div">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3 test-div">.col-md-6 .offset-md-3</div>
    </div>
</div>

The layout file is minimal:

<!DOCTYPE html>
<html>
<head >
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <!--<partial name="_CookieConsentPartial" />-->
        @RenderBody()

</body>
</html>

and test-div is defined so:

.test-div {
    background-color: antiquewhite;
    border: 1px solid;
    margin: 5px;
}

My page comes out as shown in the attachment - NO OFFSETS... If I remove the enclosing container div the situation is similar.

What is going on?

I am using bootstrap 4.1.3. I saw there were issues with this in beta but it is supposed to be fixed, per the 4.1 docs.

mahan · Accepted Answer · 2018-12-03T07:39:06.557

0

offset-*-* classes apply margin-left on the element you use them. As you see in the following code, offset-md-3 applies 25% margin-left.

@media (min-width: 768px)
    .offset-md-3 {
        margin-left: 25%;
    }

You reset the margin properties of the columns in test-div. The columns have 5px margin-left now, not 25%. Hence, the offset-*-* classes does not work.

It should work if you do not reset margin of those elements.

https://codepen.io/anon/pen/RqvEvJ

edited Dec 03 '18 at 07:39

answered Dec 02 '18 at 11:22

mahan

12,366
5
48
83

thanks @mahan! so am I right to assume I can change the rest of the margin values, except for left? – GilShalit Dec 02 '18 at 16:34
1

@GilShalit You are welcome. You can set its `margin-y` but not `margin-x`. If you do so, you [break the grid](https://stackoverflow.com/questions/22989515/bootstrap-add-margin-padding-space-between-columns). – mahan Dec 02 '18 at 18:20

Why is the bootstrap 4 offset sample not working?

1 Answers1