Skip to main content

Quick Start | Bootstrap

Mastering Responsive Layout and Alignment​

Using Flex the right way is key​

All you need to know is here ref

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Full example of a common use case, alight buttons to right, with gap

<div className="d-flex justify-content-end gap-1">
    <QxButton onClick={handleSaveClick}>Save</QxButton>
    <QxButton onClick={handleDeleteClick}>Delete</QxButton>
</div>