Hi there, I am pretty new to bootstrap and have been hunting for a solution regarding this specific layout that I want to achieve. Check out the image below:
https://i.sstatic.net/qqaCo.pngThe issue I am facing is that in my code, the name, code, status, and contact person are not aligning together as desired. Below is a snippet of the problem: https://i.sstatic.net/tCfrg.png
Furthermore, here is the snippet of the actual code:
<div class = "col-md-12 border " style ="padding:0px;margin:0px;">
%{-- Customer information--}%
<div class="container-fluid well span6 ">
<div class="row-fluid ">
<div class="span8">
<div class = "row">
<div class = "col-md-6">
</div>
<div class = "col-md-6">
<div class = "row">
<div class = "col-md-6">
<g:if test="${cus.status =='Inactive'}">
<g:form class="activateStatus" controller="customer" action="activateStatus" id = "${cus.id}">
<button type="button" class="btn btn-success activate-Status" style ="color:white;font-weight: bold">Activate</button>
</g:form>
</g:if>
<g:if test="${cus.status =='Active'}">
<g:form class="changeStatus" controller="customer" action="changeStatus" id = "${cus.id}">
<button type="button" class="btn btn-danger change-Status" style ="color:white;font-weight: bold">Deactivate</button>
</g:form>
</g:if>
</div>
<div class = "col-md-3">
<g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold">Back</button></g:link>
</div>
<div class = "col-md-3">
<g:link action="editCustomer" id="${cus.id}"><button id = "edit" type="button" class="btn" style = " font-weight: bold;color: white;background-color:#1f549c"><i id = "add-icon" class="fa fa-edit" aria-hidden="true"></i>Edit</button></g:link>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-12">
<h4 style = "text-align: center;font-weight: bold">Name : ${cus.name}</h4>
<h4 style = "text-align: center;font-weight: bold">Code: ${cus.code}</h4>
<h4 style = "text-align: center;font-weight: bold">Contact Person: ${cus.contactPerson}</h4>
<h4 style = "text-align: center;font-weight: bold">Status: ${cus.status}</h4>
</div>
</div>
</div>
</div>
</div>
</div>