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
Related
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;
}
<div class="col-sm-12 col-md-12 text-center">
<h1>Example Horizontal Form Bootstrap</h1>
</div>
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4 text-center">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Enter your Email here........! Hello </label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Enter your Email here........! Hello</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
I want to place the "text and textbox" in one line. At present, I am getting text in multiple lines beside the textbox like below.
You have a couple of options.
Option 1:
Reduce the label text and/or increase the column allocated to it. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
Option 2: You can use text-truncate class to truncate any overflow text. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Email here........! Hello</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Password here........! Hello</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
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 am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't think I quite understand how bootstrap works with the grid. I want the name and actual field to match up unless the screen size is xs so every field is its own row. For each row, I want the text boxes always aligned.
Here's what I've tried.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10 "></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
Bonus points for someone who can also help me make the description field larger - enough height for at least 20 new lines.
this includes the extra 20 spaces in despcription
Add this to your .css
.col-sm-4 {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div