Currently, I am facing an issue while trying to align 2 forms side by side using the Bootstrap grid system. Despite following the documentation exactly, it doesn't seem to work and I can't figure out why. Here is the HTML code I'm using:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<div class="container-fluid bg">
<div class="row no-gutters">
<div class="col-md-3"></div>
<div class="col-md-3">
<form class="form-container">
<div class="form-group">
<h2>Idea X</h2>
<h4>Project Description: </h4>
<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci nec sapien ultricies, et auctor elit molestie. Fusce non est felis.</label>
</div>
<div class="form-group">
<label>Languages Used: </label>
<ul class="list-group">
<li class="list-group-item">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">AngularJS</li>
</ul>
</div>
<button class="btn btn-success btn-block">I Want to Participate</button>
</div>
</form>
</div>
<div class="col-md-3">
<form class="form-container">
<div class="form-group">
<h2>Idea X</h2>
<h4>Project Description: </h4>
<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci nec sapien ultricies, et auctor elit molestie. Fusce non est felis.</label>
</div>
<div class="form-group">
<label>Languages Used: </label>
<ul class="list-group">
<li class="list-group-item">HTML5</li>
<li class="list-group-item">CSS3</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">AngularJS</li>
</ul>
</div>
<button class="btn btn-success btn-block">I Want to Participate</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>Any assistance would be greatly appreciated. Thank you!