Want to place three column in one row in angular 18

<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3 mb-3">
<label class="form-label" for="locationName">Location Name</label>
<input class="form-control" id="locationName" type="text" placeholder="Enter Location Name">
</div>
<div class="col-sm-12 col-md-6 col-lg-3 mb-3">
<label class="form-label" for="email">Email</label>
<input class="form-control" id="email" type="email" placeholder="Enter Email">
</div>
<div class="col-sm-12 col-md-6 col-lg-3 mb-3"> <label class="form-label" for="Phone">Phone</label>
<input class="form-control" id="Phone" type="tel" placeholder="Enter Phone">
</div>
</div>


I am unable to place the three column in one row. Its only placing one column in one row. Its not working accordingly. Bootstrap col class i used.

Continue reading...