Label beside input (bootstrap form)
I tried coding this but i dont get the expected output, i also tried to use inline but it doesnt work too.
maybe someone can help me show the expected output. thank you
<form action="" method="POST">
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Student name</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Address</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">ID Number</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Email</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
</form>
here is the sample result
Wrapping the label and input in a row with 2-10 columns should do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
</body>
</html>You can adjust the padding/margin according to your needs.