0

I have a 3 row layout and inside of it there are multiple column and row combinations.

I tried this solution, but I couldn't do it to my code. How can I get a Bootstrap column to span multiple rows?

I have problem with 2nd row, I want to align 3rd column.

enter image description here

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner">
    <div class="column-header text-center">Geçmiş</div>
  </div>
  <div class="col-4 column-aligner">deneme</div>
    <div class="col-3 column-aligner">deneme</div>
    <div class="col-3 column-aligner">deneme</div>
  </div>
</div>

<div class="today-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner">
      <div class="column-header text-center">Bugün</div>
    </div>
    <div class="col-4 column-aligner">deneme</div>
      <div class="col-3 defect-wrapper justify-content-center">
        <div class="row defect-wrapper-row">
        <div class="col-6 defect-col">deneme</div>
        <div class="col-6 defect-col">deneme</div>
      </div>
    </div>
    <div class="col-3 column-aligner">deneme</div>
  </div>
</div>

<div class="action-wrapper">
  <div class="row align-items-center">
    <div class="col-1 column-aligner action-notes">
      <div class="column-header text-center">Aksiyonlar</div>
      </div>
    <div class="col-10 column-aligner action-notes">deneme</div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
piseynir
  • 237
  • 1
  • 4
  • 14
  • Judging by your screenshot you have some custom CSS involved that you haven't shown us. Be sure you're not sending us down the wrong path. Include that in the snippet demo if necessary. – isherwood May 27 '22 at 13:05

2 Answers2

1

Firstly, rows should always be children of containers. The two have offsetting margins that need to balance. Review the grid docs. I've used the container-fluid class so they're full width.

Then, your columns need to total 12 for a given row (or at least should have the same total for each row). If you can't make that work, consider using Bootstrap's flexbox layout instead of rows and columns.

Also, your nested columns should span the entire row if you want them to stack, meaning you need col-12 instead of col-6 for those.

The only thing remaining is to set heights on the columns, if you actually need them to stretch. That can be done in several ways.

I've added interior divs and some CSS here for demonstration purposes. You wouldn't need those unless you want to apply color as I have.

/* styles for demo only */
.row>div>div:not(.row) {
  background: #ddd;
  border: 1px dotted #aaa;
}

.today-wrapper>.row {
  background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid past-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner">
      <div class="column-header text-center">Geçmiş</div>
    </div>
    <div class="col-4 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
  </div>
</div>

<div class="container-fluid today-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner">
      <div class="column-header text-center">
        Bugün
      </div>
    </div>
    <div class="col-4 column-aligner">
      <div>deneme</div>
    </div>
    <div class="col-3 defect-wrapper justify-content-center">
      <div class="row defect-wrapper-row">
        <div class="col-12 defect-col">
          <div>deneme</div>
        </div>
        <div class="col-12 defect-col">
          <div>deneme</div>
        </div>
      </div>
    </div>
    <div class="col-3 column-aligner">
      <div>deneme</div>
    </div>
  </div>
</div>

<div class="container-fluid action-wrapper">
  <div class="row align-items-center">
    <div class="col-2 column-aligner action-notes">
      <div class="column-header text-center">
        <div>Aksiyonlar</div>
      </div>
    </div>
    <div class="col-10 column-aligner action-notes">
      <div>deneme</div>
    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

the sum of the columns must be 12, if it gives more or less, the layout will be harmed.

I made some adjustments to the columns.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

<div class="container-fluid text-center">
    <div class="past-wrapper bg-danger">
        <div class="row align-items-center">
            <div class="col-1 column-aligner">
                <div class="column-header">Geçmiş</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
            <div class="col-3 column-aligner">deneme</div>
            <div class="col-4 column-aligner">deneme</div>
        </div>
    </div>

    <div class="today-wrapper bg-warning">
        <div class="row align-items-center">
            <div class="col-1 column-aligner">
                <div class="column-header">Bugün</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
            <div class="col-3 column-aligner">
                <div class="w-100 defect-col">deneme</div>
                <div class="w-100 defect-col">deneme</div>
            </div>
            <div class="col-4 column-aligner">deneme</div>
        </div>
    </div>

    <div class="action-wrapper bg-primary">
        <div class="row align-items-center">
            <div class="col-1 column-aligner action-notes">
                <div class="column-header">Aksiyonlar</div>
            </div>
            <div class="col-11 column-aligner action-notes">deneme</div>
        </div>
    </div>
</div>
Guilherme Silva
  • 41
  • 6