This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I've question how to make form align to center with bootstrap.
Here's my code:
<body>
<div class="p-3 mb-2 bg-light text-dark container text-center">
<h2>Rezervacija Stanovanje Aljaz</h2>
<br>
<br>
<label><b>Ime: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="" >
<label><b>Priimek: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="" ><label><b>Telefon: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
</div>
</body>
If you are making HTML email template as you said in one of your comment.. you should use table layout or you will have problems with that template in many clients.
I don't suggest using flex in emails templates too.. but to answer your question add these classes to your first div d-flex flex-column align-items-center.
Add CSS link of bootstrap4-5 after your title tag else write custom CSS code. text-algin: center;
You need to use the various Bootstrap 4 centering methods...
Use text-center for inline elements.
Use justify-content-center for flexbox elements (ie; form-inline)
https://codeply.com/go/Am5LvvjTxC
Also, to offset the column, the col-sm-* must be contained within a .row, and the .row must be in a container...
<section id="cover">
<div id="cover-caption">
<div id="container" class="container">
<div class="row">
<div class="col-sm-10 offset-sm-1 text-center">
<h1 class="display-3">Welcome to Bootstrap 4</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="text" class="form-control" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-success ">okay, go!</button>
</form>
</div>
<br>
↓
</div>
</div>
</div>
</div>
</section>
Related
I am trying to learn bootstrap grid and want to create a row with two columns: one wide and one not so wide. In the left column I want to put an inline form and in the right narrower column I will put another form with a button. I copied Bootstrap example for 2 columns in one row and then I copied the Bootstrap inline form code and pasted it into one of the columns but it is not inline when I run the code. This is the code I have so far:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="MyContainer">
<div class="row">
<div class="col-6">
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="col-6">
One of two columns
</div>
</div>
</div>
Instead of the form controls being inline they are stacked one on top of the other.
Can someone see where I am going wrong?
You are using classes from older versions of Bootstrap, yet you use Bootstrap 5.1. I made some changes:
Firstly, it’s .visually-hidden, not .sr-only anymore. Secondly, .form-inline is no longer supported, so I changed the class to row and added .col-3 classes to the form’s children. I also changed the two columns’ classes as you said you want one to be wider than the other. I don’t know what resources you use for Bootstrap, but I recommend relying on the official documentation.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="MyContainer">
<div class="row">
<div class="col-8">
<form class="m-2 row align-items-center">
<div class="col-3 mb-2 mr-sm-2">
<label class="visually-hidden" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control" id="inlineFormInputName2" placeholder="Jane Doe">
</div>
<div class="col-3 mb-2 mr-sm-2">
<label class="visually-hidden" for="inlineFormInputGroupUsername2">Username</label>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="col-3 form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="col-3 btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
Countless SO posts, countless attempts, and this is the closest I could achieve. I think most of the answers are outdated but I couldn't find any that work for Bootstrap 5.
How can I vertically and horizontally center the page content in bootstrap 5, no matter the screen resolution?
Code so far:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<div class="jumbotron min-vh-100 text-center m-0 d-flex flex-column justify-content-center">
<h1 class="display-4">Welcome Back</h1>
<p class="lead">Enter your account details below.</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
</div>
</body>
I am trying to align my bootstrap check boxes horizontally using:
<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="container-fluid">
<label class="text-left col-lg-12 col-md-12 col-sm-12 col-xs-12 col-form-label">Attributes:</label>
<input type="checkbox" value="">
<label class="checkbox-inline col-lg-2">Camp Site</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Offsite Visit</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Scout Den</label>
<input type="checkbox" value="">
<label class="checkbox-inline">Hike</label>
</div>
</div>
</div>
I had an issue with my input fields not filling the width of the bootstrap container and found the solution on stackoverflow to add the css:
input, textarea {
width: 100% !important
}
However, this is causing issues with the check box formatting.
With the css:
Without the css:
please use this source if working with bootstrap
https://getbootstrap.com/docs/4.0/components/forms/#default-stacked
This question already has answers here:
Bootstrap get div to align in the center
(2 answers)
Closed 5 years ago.
I would like to center horizontally the login form, it is centered on mobile devices, but I can't figure out how to achieve the same on a monitor screen. I am using Bootstrap 3.
<div class="container-fluid main-container">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group row">
<div class="col-sm-3">
<label for="email">Username:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<div class="form-group row">
<div class="col-sm-3">
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
</div>
</form>
</div>
Set the container to display flex and use justify-content and align-items like this
.container-fluid {
display: flex;
justify-content: center;
align-items: center;
}
this is a css solution I don't think you can achieve this with bootstrap
I have the following code, meant to vertically align a button in my Bootstrap form section:
HTML:
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label for="isbn">ISBN# (10 or 13)</label>
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
CSS:
.form-isbn {
display: table-cell;
vertical-align: bottom;
float: none;
}
For some reason, it's still not working as it should. Screenshot attached shows what is happening (seems that vertical alignment is...top by default? I need the button to sit at the bottom of the row to properly align with the input field that it's next to.
Any idea what the issue might be? I'm sort of dumbfounded, and I have looked at a couple similar questions here on SO, to no avail. :(
Try this one.
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
Hope this help.
*Try to disable the css you made for the .form-isbn
I came across this recently and wanted to achieve the same. One way to achieve with pure bootstrap classes is to push the input and button to a separate row and remove the bottom margin in the first row to bring the label as close to the input as before
<div class="form-group">
<div class="row">
<div class="col-md-9 mb-0">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button">Check ISBN</button>
</div>
</div>
</div>