Bootstrap, did you do the layout of the blocks correctly?

Question

css

Hello! I made the markup of the blocks, but the question is the "correctness" of such a design, because it was not possible to come up with other options and google it.
Task: there are 2 columns with information, the left column should have a maximum (not fixed) width, the content of the column is pressed to the left side. The width of the right column is initially unknown, its width should be no more than the width of the content inside it, the column content is pressed to the right side.
What happened to me:
HTML:

<div class="container-fluid bgBack">
<div class="container content noPadding">
<div class="row">
<div class="leftColumn container-fluid noPadding">текст</div>
<div class="rightColumn container-fluid noPadding">текст</div>
</div>
</div>
</div>
</div>

CSS:

.leftColumn {margin-left: 0;}
.rightColumn {margin-right: 0;}

Answer 1

Read:
getbootstrap.com/css/#grid-offsetting

Answer 2

Declared a line, super.

<div class="container-fluid bgBack">
<div class="container content noPadding">
<div class="row">
...
</div>
</div>
</div>

Now we need to create columns in it.
Inside .row we write:

<div class="col-md-6">левая колонка</div>
<div class="col-md-6">правая колонка</div>

I understand that you need to create two columns per row.
For more details, indeed, read here: getbootstrap.com/css/#grid-offsetting

Answer 3

UPD: Bootstrap assumes a " container > row > columns " hierarchy. The correct layout would be:

<div class="container">
  <div class="row">
    <div class="rightColumn">текст справа</div>
    <div class="leftColumn">текст слева</div>
  </div>
</div>

.leftColumn { 
  overflow: hidden;
}
.rightColumn {
  float: right;
  text-align: right;
}

Demo solution: https://jsfiddle.net/glebkema/um8r9buL/