I have a snippet:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<header>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="logo">
<img src="#" alt=" logotype">
</div>
</div>
<div class="col-lg-9">
<div class="head-buttons mr-auto">
<a href="">Русский</a>
<div class="auth-buttons">
<button>Войти</button>
<button>Регистрация</button>
</div>
</div>
</div>
</div>
</div>
</header>I want col-lg-9 all content in this div align to right. Why mr-auto is not working? How I can fix it? I tried and justify-content-end on row, not working..
auto-margins work for flexbox containers, but col-lg-9 isn't a flexbox container. Use d-flex to make it a flexbox container, and then ml-auto to push the content to the right.
<div class="row">
<div class="col-lg-3">
<div class="logo">
<img src="#" alt="logotype">
</div>
</div>
<div class="col-lg-9 d-flex">
<div class="head-buttons ml-auto">
<a href="">Русский</a>
<div class="auth-buttons">
<button>Войти</button>
<button>Регистрация</button>
</div>
</div>
</div>
</div>
Another option is to use col-lg-auto to shrink the width of the right column to its content. Then ml-auto on the column will work too.
<div class="row">
<div class="col-lg-3">
<div class="logo">
<img src="#" alt=" logotype">
</div>
</div>
<div class="col-lg-auto ml-auto">
<div class="head-buttons">
<a href="">Русский</a>
<div class="auth-buttons">
<button>Войти</button>
<button>Регистрация</button>
</div>
</div>
</div>
</div>