0

Bootstrap 4.0

My row has two columns and the offset: 

<!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="css/bootstrap.min.css">
  </head>
  <body>
    <div class='container'>
        <div class='row'>
            <div class='col-md-offset-4 col-md-4'>1/3</div>
            <div class='col-md-4'>1/3</div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

But I haven't the offset at the left. My jsFiddle is here.

Why I haven't the offset (col-md-offset-4) at the left?

Andrey Bushman
  • 11,712
  • 17
  • 87
  • 182
  • You have mistake in naming class - https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns and this classes are missing in your bootstrap.min.css. – ondra15 Sep 27 '17 at 10:11
  • And now i downloaded bootstrap.min.css from BS4.0.0-beta from getbootstrap.com and know that classes `.offset-*` are missing. Mistake from developer Bootstrap I think – ondra15 Sep 27 '17 at 10:21
  • 1
    @ondra15, thank you. I read the *Bootstrap By Example* by Silvio Moreto. His example uses `col-md-offset-4` class for offset apply. I think it is misprint. – Andrey Bushman Sep 27 '17 at 10:26
  • for Bootstrap 4 beta and forward the offset classes are deprecated – gota Sep 27 '17 at 11:47

1 Answers1

1

You have tagged both BS3 and BS4 which have a crucial difference when offsetting columns:

 - v3 - Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4.

 - v4 - Uses offset-*-* classes to offset columns. For example, offset-md-4.

source

Also, you probably didn't include the proper requirements for BS4, when I try and paste their example from Documentation to your fiddle, it doesn't work:

BS 4 offset

DanteTheSmith
  • 2,937
  • 1
  • 16
  • 31
  • I replaced the `col-md-offset-4` by `offset-md-4` but I get the same result. I included all requirements from here: https://getbootstrap.com/docs/4.0/getting-started/introduction/ . Also I see one of his link uses `jquery-3.2.1.slim.min.js` instead of 4.0... Is it misprint? – Andrey Bushman Sep 27 '17 at 11:17
  • That's odd, they probably have an error in either hosted files or their versions or links in the tutorial. jQuery is library being developed independently from BS which only uses it. So jQ version numbers might or might not match those of BS.There is one thing you can try, download BS package, include local files (not in Fiddle but on PC) and try if ir works there. – DanteTheSmith Sep 27 '17 at 11:28