How to put different margins width between targeted columns without my column starting a new line? (I want to keep a total of 12 col)

Question

Here is the JSFiddle link to the code.

I want to put different vertical margin width between targeted columns. I already tried to put margin between my col-xs-4 and col-lg-4 by putting mr-4

<div class="container-fluid">
          <div class="row">
              <div class="col-4 col-xs-4 col-lg-4 mr-4">Logo</div>
              <div class="col-8 col-xs-8 col-lg-8">Titre</div>
          </div>

But the column don't fit anymore in XS mode, and in LG mode the column go to the next line. I need to do the same as this images in responsive XS and LG :

Mobile(XS)

Desktop(LG)

score 0 · Answer 1 · answered Jun 28 '20 at 18:34

As described here you can give the parent a negative margin mx-n*, and the children a positive padding px-* e.g.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row  mx-n2">
        <div class="px-2  col-4 col-xs-4 col-lg-4">
            <div class="p-3 border bg-light">Logo</div>
        </div>
        <div class="px-2  col-8 col-xs-8 col-lg-8">
            <div class="p-3 border bg-light">Titre</div>
        </div>
    </div>
</div>

Demo Fiddle

How to put different margins width between targeted columns without my column starting a new line? (I want to keep a total of 12 col)

1 Answers1