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;
}
Related
I tried coding this but i dont get the expected output, i also tried to use inline but it doesnt work too.
maybe someone can help me show the expected output. thank you
<form action="" method="POST">
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Student name</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Address</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">ID Number</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Email</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
</form>
here is the sample result
Wrapping the label and input in a row with 2-10 columns should do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
</body>
</html>
You can adjust the padding/margin according to your needs.
Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I have a nested form row and want to align the form fields vertically. The output currently is this:
Code is here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Rate</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Start date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">End date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
As you can see there is a slight misalignment in the columns. I have an image that I want to align with the other 3 fields.
I tried adjusting the column numbers but I can't make it align properly.
Just added custom style padding-left:24px !important for div class='col-sm-7 padd-left' it will be work's
#media only screen and (min-width: 768px) {
.padd-left{
padding-left:24px !important
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Rate</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">Start date</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label">End date</label>
<div class="col-sm-7 padd-left">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
The problem is that the <label> elmenets do not have the same width. You have used .col-sm-3 on the first two and .col-ms-5 on the last three. Even if you use the same .col-* on all of them, still they would have different width since the last three are nested. (Check the first code snippet)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label bg-danger">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label bg-danger">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-7">
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">Rate</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">Start date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-5 col-form-label bg-danger">End date</label>
<div class="col-sm-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
My suggetion is to use a container for each one of the <label> elmements and apply .col-sm-auto and .col-12 directly on the container. Then, set a fixed width for the <label> so that they all have the same width. You can use media queries to set different width based on the viewport size.
Use .col-sm on the <input> and <textarea> container so that they take all the available space. Use .col-12 on them for mobile.
#media (min-width: 576px) {
label {
width: 200px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-body">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="name" class="col-form-label">Name</label>
</div>
<div class="col-sm col-12">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Description</label>
</div>
<div class="col-12 col-sm">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-7">
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary ">
<label for="description" class="col-form-label">Rate</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label">Start date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-12 col-sm-auto bg-primary">
<label for="description" class="col-form-label ">End date</label>
</div>
<div class="col-12 col-sm">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="co-12 col-sm-5">
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/RzMzpR
Can you try my code. I modified some line code:
<div class="card">
<div class="card-body">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" disabled>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="description" rows="5" disabled></textarea>
</div>
</div>
<div class="form-group row">
<div class='col-3'>
<div class="form-group"><label for="description" class="col-form-label">Rate</label></div>
<div class="form-group"><label for="description" class="col-form-label">Start date</label></div>
<div class="form-group">
<label for="description" class="col-form-label">End date</label>
</div>
</div>
<div class='col-4'>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control datepicker">
</div>
<div class="form-group">
<input type="text" class="form-control datepicker">
</div>
</div>
<div class='col-5'>
<div class="promotion-image-container">
<img src="https://via.placeholder.com/300x200" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
This is a demo link: https://codepen.io/phuongnm153/pen/zVWevP
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>
On the click of Print button windows.print() function gets called and a print of the form is taken.But in the print every form field gets allocated a entire separate row.I wanted the form fields to be arranged in the same order as they are arranged in the form.
For Ex:Father's Occupation,Education,Income fields are in one single row but in the print they are assigned separate rows.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="form2.css">
</head>
<body>
<div class="container box-container">
<h1 align="center">Admission Form</h1>
<h3 align="center">(2016/2017)</h3>
<br/>
<form class="form-inline" id="sunrise" name="sunrise" method="post" action="">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-4">
<div class="form-group upload"> <label>Upload Child's Image:</label>
<input name="fileUpload" type="file" id="fileUpload" /><br />
<div name="image-holder" id="image-holder"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Scholar No:</label>
<input type="text" class="form-control" name="scholar" placeholder="Scholar No:" disabled>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Class:</label>
<input type="text" class="form-control" name="class" placeholder="Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Date:</label>
<input name="date" id="date" name="date" class="form-control" placeholder="Date" disabled>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="name" placeholder="Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Father's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="father" placeholder="Father's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Mother's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="mother" placeholder="Mother's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>DOB:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="date" class="form-control box-size" name="dob" placeholder="Date of Birth">
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Gender:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <select class="form-control" name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<label>Category:</label>
</div>
<div class="col-md-10 col-sm-10">
<div class="col-md-6">
<div class="checkbox">
<label><input type="checkbox" value="gen">Gen</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="obc">Obc</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="st">ST</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sc">SC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sbc">SBC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="bpl">BPL</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="other">OTHER</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Cast:</label>
<input type="text" class="form-control" name="cast" placeholder="Cast">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Aadhar Card No:</label>
<input type="text" class="form-control" name="aadhar" placeholder="Aadhar Card No">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Religion:</label>
<input type="text" class="form-control" name="religion" placeholder="Religion">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Present Address:</label>
<input type="text" class="form-control" name="present" placeholder="Present Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pin" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Permanent Address:</label>
<input type="text" class="form-control" name="permanent" placeholder="Permanent Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pincode" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Mobile No 1:
</label>
<input type="text" class="form-control" name="mobile" placeholder="Mobile Number 1">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>2:</label>
<input type="text" class="form-control" name="mobile2" placeholder="Mobile Number 2">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>3:</label>
<input type="text" class="form-control" name="mobile3" placeholder="Mobile Number 3">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="fatherjob" placeholder="Father's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="fatheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="fatherincome" placeholder="Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="motherjob" placeholder="Mother's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="motheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="motherincome" placeholder="Mother Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Last School Name:</label>
</div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="lastschool" placeholder="Last School Name">
</div></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Passed Class:</label>
<input type="text" class="form-control" name="classpassed" placeholder="Passed Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Obtained Marks:</label>
<input type="text" class="form-control" name="marksobtained" placeholder="Obtained Marks">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Percentage:</label>
<input type="text" class="form-control" name="percentage" placeholder="Percentage">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Hosteler/Day Scholar:</label>
<select class="form-control" name="hostelornot">
<option>Day Scholar</option>
<option>Hosteler</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>
Bus Facility:</label>
<input type="text" class="form-control" name="bus" placeholder="Bus Facility">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Physical Disability:</label>
<select class="form-control" name="disability">
<option>NO</option>
<option>YES</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Any allergical disease:</label>
<input type="text" class="form-control" name="disease" placeholder="Any allergical disease">
</div>
</div>
</div>
<h2 align="center">Declaration By Parent</h2>
<div class="">
<div class="checkbox">
<label><input type="checkbox" value="done" required /></label>We have read the prospectus of Sunrise International Public School and undertake to abide by all the rules as laid down in the school prospectus, we also agree to abide by any amendment to these rules, which may be incorporated from time to time.
</div>
</div>
<br/>
<br/>
<div class="row signature">
<div class="">
<label>Candidate's Signature:</label>
</div>
<div class="">
<label>Parent's Signature:</label>
</div>
<div class="">
<label>Principal's Signature:</label>
</div>
</div>
<br/>
<br/>
<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button>
<button type="submit" class="btn btn-default" name="submit" value="submit">Submit</button>
</form>
</div>
<script>
$("#fileUpload").on('change', function () {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
});
</script>
<script type="text/javascript">
document.getElementById('date').value = Date();
</script>
</body>
</html>