<div class="row">
<div class="col-3">
<div class="form-group">
<button type="button" class="btn btn-success">Delete
<i class="fa fa-plus-trash"></i>
</button>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="FromDate">From</label>
<input type="date" class="form-control form-control-lg" id="FromDate">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="ToDate">To</label>
<input type="date" class="form-control form-control-lg" id="ToDate">
</div>
</div>
</div>
<div class="col-3">
<div class="form-group">
<button class="btn search-btn-gold form-control-lg" type="submit"><i class="fa fa-search"></i> بحث</button>
</div>
</div>
I am trying to put this all in line but all come up and down. It's inside the fluid container.
It not even exceeding the col-12.
CodePudding user response:
You have made a mistake with your row. You didn't finish your row at the proper place. please, close that at the last of those 4 columns. and you should must linked Bootstrap with your code. Please check the screenshot
CodePudding user response:
First you have to make sure that all of your calling container or row or column are maintaining respectively. Here is the clean code which is working in single line for all type of devices.
<div class="container-fluid">
<div class="row">
<div class="col-3">
<div class="form-group">
<button type="button" class="btn btn-success">Delete
<i class="fa fa-plus-trash"></i>
</button>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="FromDate">From</label>
<input type="date" class="form-control form-control-lg" id="FromDate">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="ToDate">To</label>
<input type="date" class="form-control form-control-lg" id="ToDate">
</div>
</div>
<div class="col-3">
<div class="form-group">
<button class="btn search-btn-gold form-control-lg" type="submit"><i class="fa fa-search"></i> بحث</button>
</div>
</div>
</div>
</div>
If not working in your end, make sure that what CSS you add extra.