locked
Bootstrap Grid Query RRS feed

  • Question

  • User661555364 posted

    Hi,

    I have a grid of 3 columns and then further down the page I have another grid of 2 columns - however I need this 2 column grid's cells to match the width of the 3 column grid.

    https://prnt.sc/phyout

                <div class="row">
                    <a href="#">
                        <div class="col-md-6">
                            a
                        </div>
                    </a>
                    <a href="#">
                        <div class="col-md-6">
                            b
                        </div>
                    </a>
                </div>

    How would I do this?


    Many thanks

    Friday, October 11, 2019 2:08 PM

Answers

  • User288213138 posted

    Hi DevGuyUk,

    DevGuyUk

    I need this 2 column grid's cells to match the width of the 3 column grid.

    Do you want to set the width of the Grid of 3 columns and the Grid of 2 columns to be the same?

    If so, I suggest you put these 2 Grids into the same class and divide them according to your needs.

    More information about how to set Bootstrap Grid you can refer to this link:https://getbootstrap.com/docs/4.0/layout/grid/

    The demo:

    <div class="container">
    
                <div class="row">
                    <div class="col">
                        1 of 3
                    </div>&nbsp;&nbsp;
                    <div class="col">
                        2 of 3
                    </div>&nbsp;&nbsp;
                    <div class="col">
                        3 of 3
                    </div>
                </div>
                <br />
    
                <div class="row">
                    <div class="col">
                        1 of 2
                    </div>&nbsp;&nbsp;  
                    <div class="col">
                        2 of 2
                    </div>
                </div>
            </div>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 14, 2019 7:13 AM

All replies

  • User303363814 posted

    Use the same class on all columns.  If your top grid uses col-md-4 then use col-md-4 on the lower grid.

    (When you show code, show enough code that we can reproduce the problem. A small html file with the styles embedded should be easy to create - you already seem to have it.  Screenshots are next to useless - Show us the code that generates the bad output - then we can fix it)

    Friday, October 11, 2019 9:32 PM
  • User288213138 posted

    Hi DevGuyUk,

    DevGuyUk

    I need this 2 column grid's cells to match the width of the 3 column grid.

    Do you want to set the width of the Grid of 3 columns and the Grid of 2 columns to be the same?

    If so, I suggest you put these 2 Grids into the same class and divide them according to your needs.

    More information about how to set Bootstrap Grid you can refer to this link:https://getbootstrap.com/docs/4.0/layout/grid/

    The demo:

    <div class="container">
    
                <div class="row">
                    <div class="col">
                        1 of 3
                    </div>&nbsp;&nbsp;
                    <div class="col">
                        2 of 3
                    </div>&nbsp;&nbsp;
                    <div class="col">
                        3 of 3
                    </div>
                </div>
                <br />
    
                <div class="row">
                    <div class="col">
                        1 of 2
                    </div>&nbsp;&nbsp;  
                    <div class="col">
                        2 of 2
                    </div>
                </div>
            </div>

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 14, 2019 7:13 AM