Bootstrap CSS is Still the Sh*t But We Can Make it Better – hackernoon.com

Bootstrap is An unimaginable CSS framework For A lot of who wrestle with design, css, or Want To assemble one factor shortly.

However the Bootstrap factors you copy and paste from the documentation have flaws.

These flaws are holding again your designs!

Listed right here are 5 design Tips to right these flaws and enhance Bootstrap.

1) Convey consideration to alerts

Add darkish borders and svg icons To draw the consumer’s consideration.

<div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" position="alert">
    <p class="fs-6 mb-0 d-flex align-gadgets-center">
        <!-- https://heroicons.com/ mild-bul-->
        <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" peak="16" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
        </svg>
        <span>A straightforward primary alert—Look at it out!</span>
    </p>
</div>

2) Tables Do not have to match your database

HTML desks Do not have to be A duplicate of your database assembleion. Take away column names, id’s, And mix fields when it Is sensible.

<div class="border-0 shadow bg-white rounded">

    <h3 class="fs-5 px-3 pt-3">Clients</h3>

    <div class="px-2 pt-2">

        <desk class="desk desk-borderless fs-6">

            <tphysique>

                <tr>

                    <td>Mark Otto</td>

                    <.......

Source: https://hackernoon.com/bootstrap-css-is-still-the-sht-but-we-can-make-it-better
                    

                Tags: RSS Feeds