Align HTML TextBox side by side using CSS in Bootstrap

alya14
 
on Dec 08, 2020 06:51 AM
3743 Views

hi,

What is the beast way or easily align the input side by side or one under the other using bootstrap class, I don’t want to use style and class for each input.

side by side

 

one under the other

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 08, 2020 06:59 AM
alya14
 
on Dec 08, 2020 07:21 AM

we can do it easily like below

maybe it will work for a novice like me  :)

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Sample</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <div class="container-fluid">
        <div class="col-md-8">
            <div class="row">
                <div class="col-sm">
                    <label for="AA">A</label>
                    <input type="text" name="AA" />
                </div>
                <div class="col-sm">
                    <label for="BB">B</label>
                    <input type="text" name="BB" />
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-sm">
                    <label for="CC">C</label>
                    <input type="text" name="CC" />
                </div>
                <div class="col-sm">
                    <label for="DD">D</label>
                    <input type="text" name="DD" />
                </div>
            </div>
        </div>
        
        <div class="mt-5">
            
            <div class="col-md-8">

                <div class="row">
                    <div class="col-sm">
                        <label for="AAA">A</label>
                        <input type="text" name="AAA" />
                    </div>
                    <div class="col-sm">
                        <label for="CCC">C</label>
                        <input type="text" name="CCC" />
                    </div>
                </div>

                <div class="row mt-5">
                    <div class="col-sm">
                        <label for="BBB">B</label>
                        <input type="text" name="BBB" />
                    </div>
                    <div class="col-sm">
                        <label for="DDD">D</label>
                        <input type="text" name="DDD" />
                    </div>
                </div>

            </div>

        </div>
    </div>
</body>
</html>

Demo