The latest articles on DEV Community by Abi Rana (@abirana). https://dev.to/abirana https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F276974%2Fa60e8c8b-1d55-4025-954e-25fdf0adb9ea.png https://dev.to/abirana en Abi Rana Mon, 15 Mar 2021 15:35:15 +0000 https://dev.to/abirana/cheatsheet-on-converting-bootstrap-v4-project-to-bootstrap-v5-d9k https://dev.to/abirana/cheatsheet-on-converting-bootstrap-v4-project-to-bootstrap-v5-d9k <p>Hi guys, I've been working on <a href="https://pinegrow.com/docs/bootstrap-blocks/bootstrap-4-blocks/" rel="noopener noreferrer">Pinegrow's Bootstrap blocks and templates</a>, currently to migrate from Bootstrap 4 to Bootstrap 5. And through the process, I guess I went through almost all of the classes and changes. Therefore, I thought it would be helpful to share those changes. If you are thinking how to migrate from Bootstrap v4 to v5, this list can be handy; so you can just <strong>search and replace</strong> them.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Utilities</th> <th>Change</th> </tr> </thead> <tbody> <tr> <td>Paddings</td> <td>pl &gt; ps <br> pr &gt; pe</td> </tr> <tr> <td>Margins</td> <td>ml &gt; ms <br> mr &gt; me</td> </tr> <tr> <td>Gutters</td> <td>no-gutters &gt; g-0</td> </tr> <tr> <td>Font Styles</td> <td>font-weight- &gt; fw- <br> font-style- &gt; fst-</td> </tr> <tr> <td>Alignments</td> <td>text-left &gt; text-start <br> text-right &gt; text-end</td> </tr> <tr> <td>Ratio/Embed</td> <td>embed-responsive &gt; ratio <br> embed-responsive-16by9 &gt; ratio-16x9</td> </tr> <tr> <td>Badges</td> <td>badge-primary &gt; bg-primary <br> badge-pill &gt; rounded-pill</td> </tr> <tr> <td>Form</td> <td>form-group &gt; mb-3 <br> form-row &gt; row</td> </tr> <tr> <td>Border</td> <td>border-left &gt; border-start <br> border-right &gt; border-end</td> </tr> <tr> <td>Border Radius</td> <td>rounded-lg &amp; rounded-sm &gt; rounded-1, rounded-2 &amp; rounded-3</td> </tr> <tr> <td>Button Block</td> <td>btn-block &gt; d-block w-100 (as alternative)</td> </tr> <tr> <td>Visually Hidden</td> <td>sr-only &gt; visually-hidden</td> </tr> </tbody> </table></div> <h3> JS data name changes for menu triggers and dropdown </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Changes</th> </tr> </thead> <tbody> <tr> <td>data- &gt; data-bs-</td> </tr> <tr> <td>data-ride &gt; data-bs-ride</td> </tr> <tr> <td>data-target &gt; data-bs-target</td> </tr> <tr> <td>data-slide &gt; data-bs-slide</td> </tr> <tr> <td>data-togglet &gt; data-bs-toggle</td> </tr> </tbody> </table></div> <h3> Few other pointers </h3> <ul> <li>All class names with <strong>left/right</strong> and <strong>l/r</strong> has been changed to <strong>start/end</strong> and <strong>s/e</strong> </li> <li>Dropped classes - <strong>.media</strong>, <strong>.from-group</strong>, <strong>.from-row</strong>, <strong>.from-inline</strong> </li> <li>Form labels now require the <strong>.form-label</strong> class, which has margin bottom applied</li> <li> <strong>Negative margins</strong> are disabled in Bootstrap 5</li> <li>Columns doesn’t have <strong>position: relative</strong> property</li> <li>Form row layout changed</li> <li>Input group layout changed</li> <li>Navbar link <strong>active</strong> class is set on the link itself not on the parent</li> <li>If you put a <strong>column</strong> outside a <strong>row</strong>, always set <strong>col-* class</strong> for all the viewport that you need to cover. Mostly should be <strong>col-12</strong> for the smallest viewport.</li> </ul> <p>Please check the rest of the article which was first posted on <a href="https://blog.abirana.com/how-to-migrate-convert-bootstra-4-to-bootstrap-5" rel="noopener noreferrer">https://blog.abirana.com/how-to-migrate-convert-bootstra-4-to-bootstrap-5</a></p> webdev bootstrap css cheatsheet