Jak usunąć margines z lewej i prawej strony w bootstrapie ?

Question

Cześć. Używam w projekcie bootstrapa i mam problem z marginesami z lewej i prawej strony. Pojawiają się te marginesy automatycznie i mam problem żeby je usunąć. Na obrazku umieszczam jak to wygląda. Chcę poprostu żeby przycisk Rozwiń miał taką samą szerokość jak te zielone i niebieskie tło bez marginesów.

<div class="container d-block d-sm-none">
<div class="row">
<p class="col-12 mb-0">
  <button class="btn btn-primary col-12" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Rozwiń</button>
</p>
</div>
<div class="row">
  <div class="col-12">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class=" bg-dark text-danger ">
		Kraj: Polska </br>
		Miasto: Warszawa </br>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

Usuń z przycisku klasę col-12 a dodaj btn-block ;)

Wszystkie col-* mają margines który jest "usuwany" przez klasę "row" powyżej

btn-block dodaje dla przycisków szerokość 100 % ;)

Finalnie wyglądało by to tak 

 

<div class="row">
   <div class="col-12">
      <button class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Rozwiń</button>
   </div>
</div>

 

Comments

Marginesy z lewej i prawej strony zostały usunięte ale pojawił się teraz margines dolny.

---

Zmieniłem znacznik p na div ty też ?

---

Ok, dzięki teraz wszystko działa. a co do marginesów bocznych to ja usunąłem klasę col-12 i w tym miejscu dałem klasę btn-block, bo jeżeli zrobię tak jak ty to zrobiłeś to nic nie zmienia.

Answer 2

x - for classes that set both *-left and *-right

dodać do klasy 
np. class="col-12 mx-0"

wartości z m-margin + x - oznaczją lewy i prawy margines. 
Ewentualnie modyfikować arkuaszmi styli Css