Aligning in html – HTML & CSS – SitePoint Forums

May 14, 2024

34 1 minute read

Untitled design6 — dac78bdc99d908f0508e7879980335dba97d626f 2 1024x104.png

Am just starting up css
I have a problem of aligning and making my html look like this

i want to make it look like that in picture

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
        <style>
            .box {
                background-color: #000000;
                margin: 0 20px;
                color: white;
                padding: 20px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <div class="box status">
                        <h5>Withdraw</h5>
                        <h2>
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32">
                                <g fill="none" fill-rule="evenodd">
                                    <circle cx="16" cy="16" r="16" fill="#26a17b" />
                                    <path
                                        fill="#fff"
                                        d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042c-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658c0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061c1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658c0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118c0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116c0-1.043-3.301-1.914-7.694-2.117"
                                    />
                                </g>
                            </svg>
                            <span id="current-withdraw">25 EU</span>
                        </h2>
                        <button type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                                <path
                                    fill="currentColor"
                                    fill-rule="evenodd"
                                    d="M12 15.25a.75.75 0 0 1 .75.75v4.19l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V16a.75.75 0 0 1 .75-.75"
                                    clip-rule="evenodd"
                                />
                                <path
                                    fill="currentColor"
                                    d="M12.226 3.5c-2.75 0-4.964 2.2-4.964 4.897c0 .462.065.909.185 1.331c.497.144.963.36 1.383.64a.75.75 0 1 1-.827 1.25a3.54 3.54 0 0 0-1.967-.589c-1.961 0-3.536 1.57-3.536 3.486C2.5 16.43 4.075 18 6.036 18a.75.75 0 0 1 0 1.5C3.263 19.5 1 17.276 1 14.515c0-2.705 2.17-4.893 4.864-4.983a6.366 6.366 0 0 1-.102-1.135C5.762 4.856 8.664 2 12.226 2c3.158 0 5.796 2.244 6.355 5.221c2.3.977 3.919 3.238 3.919 5.882c0 3.074-2.188 5.631-5.093 6.253a.75.75 0 0 1-.314-1.467c2.24-.48 3.907-2.446 3.907-4.786c0-2.137-1.39-3.962-3.338-4.628a5.018 5.018 0 0 0-1.626-.27c-.583 0-1.14.1-1.658.28a.75.75 0 0 1-.494-1.416a6.517 6.517 0 0 1 3.024-.305A4.962 4.962 0 0 0 12.226 3.5"
                                />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Maybe this will help?

I assumed wanted it full width but you stuck it in a small column. If you wanted a column only then you’d have to put back in the column classes.

You must use headings logically. You can’t jump from an h5 straight to an h2 unless they are separate sections.

1 Like

Thank you so much, i appreciate

2 Likes

Source

May 14, 2024

34 1 minute read