Align HTML DIV side by side in Bootstrap

ramco1917
 
on Mar 11, 2022 05:38 AM
939 Views

Hi

I have below code & I want to display like this in one line using below code. 

    Age :  34                        Status : Active

<div class="col-sm-5 col-xl-5">
    <div class="card">
        <div class="card-body border-top-0">
            <div class="d-sm-flex flex-sm-wrap mb-3">
                <div class="font-weight-semibold">Age :</div>
                <div class="ml-sm-auto mt-2 mt-sm-0">
                    <asp:Literal ID="ltrlAge" runat="server"></asp:Literal>
                </div>
                <div class="ml-sm-auto mt-2 mt-sm-0">
                    <div class="font-weight-semibold">Next Action :</div>
                    <div class="ml-sm-auto mt-2 mt-sm-0">
                        <asp:Literal ID="ltrlNextAction" runat="server"></asp:Literal>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Thanks!

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Mar 12, 2022 01:43 AM
on Jun 13, 2022 06:50 AM

Hi ramco1917,

You need to use Bootstrap Grid System to your HTML DIV then set col class to your columns.

Use float class in your Bootstrap Grid System col to align items in a single line.

Please refer below sample.

HTML

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-sm-5 col-xl-5">
    <div class="card">
        <div class="card-body border-top-0">
            <div>
                <div class="float-left">
                    <div class="d-sm-flex flex-sm-wrap mb-1">
                        <div class="font-weight-semibold">Age :</div>
                        <div class="mt-1 mt-sm-0">
                            <aspn>10</span>
                        </div>
                    </div>
                </div>
                <div class="float-lg-right">
                    <div class="mt-1 mt-sm-0 float-right">
                        <div class="font-weight-semibold float-left">Next Action :</div>
                        <div class=" mt-2 mt-sm-0 float-left">
                            <span>Call Lead</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-sm-wrap mb-3">
            <div>
                <div class="float-left">
                    <div class="font-weight-semibold float-left">City :</div>
                    <div class="mt-2 mt-sm-0 float-left">
                        <span>NAVI MUMBAI</span>
                    </div>
                </div>
                <div class="float-right">
                    <div class="mt-2 mt-sm-0 float-left">
                        <div class="font-weight-semibold float-left">Next Date :</div>
                        <div class="mt-2 mt-sm-0 float-left">
                            <span>09/03/2022</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Demo