Tabular layout design

Bootstrap Studio Help
1

Hi all,

I need to design a layout like this:

layout
layout982×657 5.49 KB

What I can use to row and cell rounded corner?
In the single cell there could be multiline text (in particular on right cells) and on the left cell heigth must adapt with the right one.

Is there some simple compomponent to use?
Div with rounded border to contain it?

Any suggestion to start? I’m quite new of this studio.

2

Add the classes border and rounded-3 to your div/cells

or create a new class to combine the two:

.rndborder { border: 1px solid #dee2e6!important;
border-radius: .3rem!important;
}
3

Thanks, and what about layout. You can suggest div layout with col and row?

4

Something like this:

  <section>
        <div class="container">
            <div class="row gx-2">
                <div class="col-md-3 mb-2">
                    <div class="rndborder">
                        <p>xxx</p>
                    </div>
                </div>
                <div class="col-md-9 mb-2">
                    <div class="rndborder">
                        <p>xxx</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row gx-2">
                <div class="col-md-6 mb-2">
                    <div class="row gx-2 mb-2">
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx<br></p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx</p>
                            </div>
                        </div>
                    </div>
                    <div class="row gx-2 mb-2">
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx<br></p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx</p>
                            </div>
                        </div>
                    </div>
                    <div class="row gx-2 mb-2">
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx<br></p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx</p>
                            </div>
                        </div>
                    </div>
                    <div class="row gx-2">
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx<br></p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rndborder">
                                <p>xxx</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-2">
                    <div class="rndborder h-100">
                        <p>xxx</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

with css:

.rndborder {
  border: 1px solid #dee2e6!important;
  border-radius: .3rem!important;
  padding: 0.5rem;
}

I have put this on the online library, search for spiazzi69

5

I’m struggling to vertical align in the cell label or text input. Is there a property to center?

Also if I want to put a label and a text inline it seems that there are no possibility to pad them. I used flex inline.

Is there some trick to align or distribute components in a cell?

6

This might help you out:

or try floating labels, no alignment issues then :slight_smile: