Add responsive variations for sizing

[XavRsl]

Hi,

With this kind of code:

<div class="card-body">
    <h2 class="card-title font-weight-light">Dashboard Features</h2>
    <div class="row mx-auto py-3">
        <div class="col-sm">
            <h3>Email alerts</h3>
            <p>Get an email everytime a new comment appears on one of your journal's publications.</p>
        </div>
        <div class="col-sm">
            <h3>Journal dedicated recent comments</h3>
            <p>The dashboard holds a list of the most recent comments on your journal's publications.</p>
        </div>
        <div class="col-sm">
            <h3>Invite colleagues to your journal's dashboard</h3>
            <p>You may invite collaborators to your dashboard  who can also choose to be alerted to new comments on your journal.</p>
        </div>
        <div class="col-sm">
            <h3>Journal dedicated search</h3>
            <p>Search through all your journal's publications comments for authors, commenters, comments' content, …</p>
        </div>
        <div class="col-sm">
            <h3>Number of commented publications</h3>
            <p>Get the number of your journal's commented publications.</p>
        </div>
    </div>
    <div class="row mx-auto w-lg-75 py-3">
        <div class="col-sm">
            <h3>Certified Journal response</h3>
            <p>Leave official Journal responses on PubPeer.</p>
        </div>
        <div class="col-sm">
            <h3>Acknowledge comments</h3>
            <p>Let PubPeer users know that your journal has seen a comments.</p>
        </div>
        <div class="col-sm">
            <h3>Free trial period</h3>
            <p>Try out Journal Dashboard for free.</p>
        </div>
        <div class="col-sm">
            <h3>PubPeer statistics</h3>
            <p>Access stats such as the number of page views for each PubPeer thread.</p>
        </div>
    </div>
</div>

My page looks like this on large:

And will look like this on smaller screen:

Would that be a good idea for Bootstrap?

Thanks for your attention.

Xavier

[gijsbotje]

i think you can allready achieve this with flex utilities and the grid classes

[XavRsl]

I didn't really find any way to achieve this without css grids. This method seemed elegant and close enough to the Bootstrap v4's spirit... 😋

[andresgalante]

Hi @XavRsl Thanks a lot for your PR.

This has been done in this PR #24015 and close with this comment.

I'll leave it open in case @mdo wants to reconsider this idea.

[mdo]

Yup, closing still :). Thanks though!