Как "приклеить" блок к правому краю, если он внутри .col (Bootstrap)?

Question

Как приклеить блок .test4 к правому краю? Я пробовал его помещать в родительский блок с position: relative, а самому ему давать position: absolute и right:0, но получается как на картинке:

Тут видно что стандартный Bootstrap отступ по краям мешает прижать блок к правому краю.

.container,
.row {
  height: 100vh;
}

.test1 {
  background: #ccc;
}

.test2 {
  background: #aaa;
}

.test3 {
  background: #999;
}

.test4 {
  background: gold;
  height: 50px;
  width: 50px;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="test1 col-8">
      test1
    </div>
    <div class="test2 col-2">
      test2
    </div>
    <div class="test3 col-2">
      test3
      <div class="test4">test4</div>
    </div>
  </div>
</div>

Answer 1

Если элемент не относится к bootstrap контейнеру, правильно его будет вынести с класса .container

HTML

 <div class="wrapper">
        <div class="container">
            <div class="row">
                <div class="test1 col-8">
                    test1
                </div>
                <div class="test2 col-2">
                    test2
                </div>
                <div class="test3 col-2">
                    test3
                </div>
            </div>
        </div>

        <div class="test4">test4</div>
    </div>

CSS

.test4 {
    position: absolute;
    top: 0;
    right: 0;
    background: gold;
    height: 50px;
    width: 50px;
}

БЛОГ НА HUSL

Как "приклеить" блок к правому краю, если он внутри .col (Bootstrap)?

Ответы (1 шт):