Here below is my code:
<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
<div class="form-row">
<div class="col-12">
<div class="row ml-0 mr-0">
<div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
<div class="row col-12 mb-2">
<div class="col-2 spacer"></div>
<div class="col-10 pl-0 d-inline">
<input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row ml-0 mr-0 mb-3">
<label for="date" class="col-2 pl-0 justify-content-start align-items-start">Event:</label>
<select type="field" class="form-control form-control-sm ml-2" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
<div class="row ml-0 mr-0 mb-3">
<label for="date" class="col-2 pl-0 justify-content-start align-items-start">Date:</label>
<div class="col-2 pl-0 d-inline">
<input class="form-control">
</div>
</div>
</div>
</div>
</div>
I'm using the standard Bootstrap 12-column layout, with the first column set as col-2 and the second column set as col-10.
I thought that would mean my elements exactly left align but they don't.
How do I get the elements to left align / sit flush with each other?
<div>
<div class="row mb-1">
<div class="col-2"></div>
<div class="col-10"> <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<label for="date" class="">Event:</label>
</div>
<div class="col-10">
<select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<label for="date" class="">Date:</label>
</div>
<div class="col-10">
<input class="form-control" style="width: 140px">
</div>
</div>
</div>
Try this structure, this is simple and short, will help you too
we can write it like this with much more simpler way,
just use normal grid classes, you are making your markup too complicate
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="padding: 20px;">
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<input class="form-control" style="width:100px;display:inline-block;" />
<label class="label" style="display:inline-block;">days</label>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<select type="field" class="form-control">
<option value="" disabled selected>(select)</option>
<option value="" >option 1</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<input class="form-control" style="width:100px;display:inline-block;" />
</div>
</div>
</div>
Changed the structure:
col-2 as you mentioned will have the label
col-8 will have the inputs
Make sure to wrap col in their respective row
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body-scrolled">
<div class="container">
<div class="row">
<div class="col-2">
Label
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
<div class="row">
<div class="col-2">
Event:
</div>
<div class="col-8">
<select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
</div>
<div class="row">
<div class="col-2">
Date:
</div>
<div class="col-8">
<div class="col-2 pl-0 d-inline">
<input class="form-control">
</div>
</div>
</div>
</div>
</div>
Related
Let's say I have this kind of grid columns bootstrap 4 (image on the left) and then I collapse the card 1 using boostrap collapse, and I expected the grid 3 to overlapping the height of row (and the result will be on the right image)
I have tried it using align-item-start and align-self-start, turns out it just like the row class bootstrap..
my investigation is that grid 1 and 2 covered by row class that has certain height (if height 1 < 2 then height 2 will be the row height and vice versa..
is this even possible using bootstrap 4?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row no-gutter">
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapseRekamMedis" aria-expanded="true" aria-controls="collapseRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapseRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
<div class="col-5 float-right">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Informasi Pasien</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsePatientData" aria-expanded="true" aria-controls="collapsePatientData">
Toggle
</button>
</div>
<div class="collapse show" id="collapsePatientData">
<!-- Card Body -->
<div class="card-body py-2">
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">
<nobr>Pasien <i class="text text-danger">*</i></nobr>
</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Maman Abdurrahman">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Usia</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="25 thn">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Diagnosa</label>
<div class="col-8">
<input type="text" readonly class="form-control-plaintext" id="patient_name" value="Radang tenggorokan">
</div>
</div>
<div class="mb-0 row">
<label class="col-4 col-form-label text-right">Anamnesa</label>
<div class="col-12">
<textarea class="form-control-plaintext" id="patient_name" rows="6">publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Data Rekam Medis</h6>
<button class="btn btn-xs btn-primary mb-0" type="button" data-toggle="collapse" data-target="#collapsesRekamMedis" aria-expanded="true" aria-controls="collapsesRekamMedis">
Toggle
</button>
</div>
<div class="collapse show" id="collapsesRekamMedis">
<!-- Card Body -->
<div class="card-body py-2">
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Pasien<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-8">
<input type="text" class="form-control number text-right" name="anamnesa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Berat Badan<i class="text text-danger">*</i></label>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control number text-right" name="anamnesa" />
<div class="input-group-append">
<span class="input-group-text">kg</span>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">
<nobr>Tekanan Darah<i class="text text-danger">*</i></nobr>
</label>
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control number text-center" name="sistole" />
<div class="input-group-append input-group-prepend">
<span class="input-group-text">/</span>
</div>
<input type="text" class="form-control number text-center" name="diastole" />
</div>
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Perabaan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="perabaan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Pengamatan<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="pengamatan" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Penciuman<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="penciuman" />
</div>
</div>
<div class="mb-2 row">
<label class="col-sm-3 col-form-label text-right">Diagnosa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="diagnosa" />
</div>
</div>
<div class="row mb-2">
<label class="col-sm-3 col-form-label text-right">Sindrom<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="sindrom" />
</div>
</div>
<div class="row">
<label class="col-sm-3 col-form-label text-right">Anamnesa<i class="text text-danger">*</i></label>
<div class="col-sm-8">
<textarea class="form-control" name="sindrom" rows="4"></textarea>
</div>
</div>
</div>
<div class="card-footer text-right">
<button type="button" class="btn btn-warning" id="btn_save"><i class="fa fa-save"></i> Simpan</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Silly me, turns out you don't need to user .row class..
simply using .float-left and .float-right on each div
FINAL CODE
<div class="col-7 float-left"></div>
<div class="col-4 float-right"></div>
<div class="col-7 float-left"></div>
Currently, this is like this:
How can I make it look like this?
Here's the fiddle beating me up!
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" id="container">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</body>
</html>
Appreciate any help!
Here is my solution:
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" id="container">
<div class="row">
<div class="col">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
</div>
<div class="col">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Disclaimer, I've used Bootstrap 5 as a few styling were coming out clunky, probably cause you were using a beta release of Bootstrap 4 (I would recommend switching to a stable version)
This is how I would do it, I split the image and the input fields into their own columns using Grid System.
I recommend reading up on Grid System to know more
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid my-3" id="container">
<div class="col-md-12 col-sm-12 col-md-12">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6 col-sm-4">
<div>
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-8">
<div class="mb-3 row g-3">
<label for="inputPassword" class="col-lg-2 col-md-4 col-sm-1 col-form-label">Order PO #</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<select class="form-select" aria-label="Default select example">
<option selected>#</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Fabric PO #</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text" value="Only read values" aria-label="readonly input example" readonly>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">PO Date</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Lead Time</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Ship Date</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps :)
you can do this easily by using the flex property.
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid d-flex" id="container">
<div class="row">
<div class="col">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width
="100" height="100" class="mx-auto">
</div>
<div class="col">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
css
.grp{
width:50%;
display: flex;
justify-content: center;
margin-top: 120px;
}
I have few search filters on my page and a data card ASP.Net Core application. I am trying to align them on the page so it looks better. Currently it looks like below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
#Html.DisplayFor(model => model.CustomerData.Location)
<br />#Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-5 col-md-2 col-sm-12 p-0">
<label for="name" class="">Strain Name</label>
<input class="" type="text" name="name" value="#ViewData["name"]" />
</div>
<div class="col-lg-4 col-md-2 col-sm-12 p-0">
<label for="genotype" class="">Genotype</label>
<input class="" type="text" name="genotype" value="#ViewData["genotype"]" />
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
......
</select>
</div>
<div class="col-lg-6 col-md-2 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
.......
</select>
and
<select name="maxAge">
........
</select>
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
......
</select>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<div class="form-group form-actions col-md-10 no-color">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="#ViewData["stockNumber"]" />
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
I am trying put the data card in the left and align the search filters in the right 2 in a row and show them in 3 rows.
I tried changing the sizes of the col-lg-* in each row on the filters but still cannot align them like what I am trying any help is greatly appreciated
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
#Html.DisplayFor(model => model.CustomerData.Location)
<br />#Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="name" class="col-auto">Strain Name</label>
<input class="form-control" type="text" name="name" value="#ViewData["name"]" />
</div>
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="genotype" class="col-auto">Genotype</label>
<input class="form-control" type="text" name="genotype" value="#ViewData["genotype"]" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
<label for="age" class="col-auto" >Age</label>
<select class="form-control px-1" name="age">
<option>-Any-</option>
</select>
</div>
<div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
<label class="col-auto" for="minAge">Age range between</label>
<select class="form-control" name="minAge">
<option>-Start-</option>
</select>
<label class="col-auto" for="minAge">and</label>
<select class="form-control" name="maxAge">
<option>-End-</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="sex">Sex</label>
<select class="form-control px-1" name="sex">
<option>-Either-</option>
</select>
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="stockNumber">Find by Stock Number</label>
<input type="text" class="form-control" name="stockNumber" value="#ViewData["stockNumber"]" />
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
I am using bootstrap 4 grid system and I have a layout like the image above, the issue I am getting is the border is not aligned at the bottom row.
Since I am using nested columns in (first and second row) which are eventually four columns. But at the last row I have two columns. I need last row border to match with the above row.
Please help. Thanks
Fiddle Link
<div class="container mt-3">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-7 border">
<div class="row">
<label for="adf_bd_nationality" class="bg-gray-light d-flex border-right border-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Registration (Tail No.)</label>
<div class="col-5 bg-white">
<input class="form-control" />
</div>
</div>
</div>
<div class="col-5 bg-white border border-md-left-0 ">
<div class="row">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex border-md-right border-right border-bottom-0 border-top-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Serial No.</label>
<div class="col-6">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-7 border border-top-0 ">
<div class="row">
<label for="adf_bd_manufacturer" class="bg-gray-light d-flex border-right border-md-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Manufacturer</label>
<div class="col-5 bg-white">
<select name="adf_bd_manufacturer" id="adf_bd_manufacturer" class="my-select form-control">
<option value="" class="bg-black">Select</option>
<option value="Airbus" class="bg-black">Airbus</option>
<option value="Boeing" class="bg-black">Boeing</option>
<option value="Bombardier" class="bg-black">Bombardier</option>
<option value="Embraer" class="bg-black">Embraer</option>
<option value="McDonnell Douglas" class="bg-black">McDonnell Douglas</option>
<option value="Tupoloev" class="bg-black">Tupoloev</option>
<option value="Cessna" class="bg-black">Cessna</option>
<option value="Cirrus Design" class="bg-black">Cirrus Design</option>
<option value="Diamond" class="bg-black">Diamond</option>
<option value="Mooney" class="bg-black">Mooney</option>
<option value="Piper" class="bg-black">Piper</option>
</select>
</div>
</div>
</div>
<div class="col-5 bg-white border border-top-0 border-md-left-0 ">
<div class="row">
<label for="adf_bd_ICAO" class="bg-gray-light d-flex border border-md-right border-bottom-0 border-md-bottom-0 border-top-0 border-left-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Type ICAO</label>
<div class="col-6 ">
<input type="text" class="form-control text-black text-center" id="adf_bd_ICAO" name="adf_bd_ICAO" data-inputmask="'regex': '[a-zA-Z0-9]', 'repeat': 4, 'placeholder': ''" autocomplete="off" inputmode="text">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row border border-top-0 ">
<label for="adf_bd_engineTypes" class="bg-gray-light d-flex border-right border-bottom-0 border-bottom align-items-center col-4 col-form-label text-black col-form-label-sm" style="">Engine Type(s)</label>
<div class="col-8 adf_bd_engineTypesCon bg-white" style="">
<input type="text" class="form-control text-black required " id="adf_bd_engineTypes" name="adf_bd_engineTypes" data-inputmask="'regex': '^[0-9a-zA-Z]', 'repeat': 15, 'placeholder': ''">
</div>
</div>
</div>
</div>
</div>
It happens because there are many nested row inside another row. So bootstrap divides nested row to 12 columns.
What we want is to create just four columns and then put content there:
<div class="container mt-3">
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-8 border-left">
The right border
</div>
</div>
</div>
I am Trying to achieve below style using bootstrap framework. I was able to achieve some what similar to this, but the problem is the save button is not getting aligned to right(not taking available width). There is a gap between save button and red border wrapper. Is there any way to to get the button take available width? or is it possible using inline-form or something? please help.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group row">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group row">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
<button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
</div>
</div>
</div>
</div>
So I restructured your html a bit so it flows automatically (see example)
Key things to note directly related to your question:
For the button (classes)
btn-block: This will make the button expand the entire available width of the container div.
For the column (classes):
align-self-end : will put item at the very bottom right of div; would need to add mb-3 to add bottom margin so it aligns with your other element.
noPadding: custom css class. By default, cols will have padding on the left and right side. You will want to override this with a css class if you want to kill that off.
.noPadding {
padding-right: 0px !important;
padding-left: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
<div class="form-group">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
<div class="form-group">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
</div>
</div>
<div class="col align-self-end mb-3 noPadding">
<button id="btn-status-save" class="btn btn-primary btn-block" onclick="saveStatus()">Save</button>
</div>
</div>
</div>