Make Label Beside Input in Bootstrap 4
You can use form-inline for each form-group
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group form-inline">
<label>Type</label>
<input type="email" placeholder="Email Address" class="form-control">
</div>
<div class="form-group form-inline">
<label>First Name</label>
<input type="password" placeholder="Password" class="form-control">
</div>
</form>
Align labels under input boxes using Bootstrap
http://jsfiddle.net/isherwood/bTVKZ/6
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="pull-left">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<br />
<label for="decimal_input">Label 1</label>
</div>
<div>
<input type="text" value="I" width="30" id="input2" class="form-control" />
<br />
<label for="input2">Label 2</label>
</div>
</div>
</form>
</div>
Label beside input (bootstrap form)
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>
Cannot make labels show next to input using bootstrap 5.1.3
You should add class col-sm-2
instead of col-sm2
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<form>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label col-form-label-sm">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="name" required />
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Bootstrap 3.0: How to have text and input on same line?
I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.
Put label next to input form
Your labels have class col-md-6
, which is going to make them pretty wide. I'd try any of the following:
- Use a smaller label column, maybe
col-md-3
- Use
text-align: right
inside the labels to push them next to inputs - Try using
form-inline
orform-horizontal
and see if it gives you what you want
This is the markup used in the API sample for the form-horizontal
class (note how the elements are arranged):
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</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">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
How to vertically align label and input in Bootstrap 3?
The problem is that your <label>
is inside of an <h2>
tag, and header tags have a margin
set by the default stylesheet.
Related Topics
How to Make a Div with a Rails Link Clickable
Custom Fonts with Different Vertical Metrics Between Os's
How to Specify The System's Default Serif and Sans-Serif Font-Family
React Strap Cards Unable to Align Items According to The Screen Size
CSS Selector for Shadow Root or All Top Level Elements in Shadow Root
Putting Buttons and Links Over Particles.Js Script (Z-Index)
Why Is There Excessive Whitespace with Facebook Mobile Comments Plugin
How to Use Calibri Font in Linux and Mac
The Name 'Media' Does Not Exist in The Current Context
HTML5 Search Input: No Background Image in Chrome
HTML Picture or Srcset for Responsive Images
Div Moves When I Put Text in It
Bootstrap Styles Missing After Deploy to Heroku
Adding Dynamic Class Name in Svelte
CSS3 Onclick Activate Another Div's Animation
How to Create Multiple Columns in a Div