How to create white space between columns without left and right gutter?

Question

I want to create a specified amount of space between columns. So I created this based on the answers I already had. But this has an overflow to the right. I want to eliminate this overflow itself because I can't specify overflow: hidden due to interference of other components:

.row {
  margin: 0 -25px;
}

.col {
  padding: 0 25px;
  min-width: 0;
}

div {
  overflow-wrap: break-word;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
  </div>
</div>

I also saw this Pen: https://codepen.io/frouo/pen/OqGaWN

I also saw this Pen: https://codepen.io/frouo/pen/OqGaWN – Dec 28 '19 at 04:45 — , Dec 28 '19 at 04:45

Komal · Answer 1 · 2019-12-28T05:06:13.460

Take a parent div and give a css to them

Here your html code with a parent div 'content-div'

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
            </div>
    </div>
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
            </div>
    </div>
  </div>
</div>

CSS

.content-div {
  padding: 0 25px;
  max-width: 150px;
}

Note: Try to avoid assign css to bootstrap classes

score 0 · Answer 2 · answered Dec 29 '19 at 00:19

I removed the first and last padding in addition to no-gutters. This can be done, but please let me know if there is a better way to fit the Bootstrap design!

div {
  overflow-wrap: break-word;
}

[class^="col-"]:first-child>div {
  padding-left: 0 !important;
}

[class^="col-"]:last-child>div {
  padding-right: 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row no-gutters">
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text2</div>
    </div>
    <div class="col-6">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
  </div>
</div>

How to create white space between columns without left and right gutter?

2 Answers2