I am using bootstrap V5 and i wanted to center the login button in the div and i am using mx-auto and also tried text-center but none of this is working.
Where am i getting wrong.
<div className='container my-auto w-50' style={{backgroundColor:"#E8D2A6"}}>
<div className="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div className="form-group row">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter user id'/>
</div>
</div>
<div className="form-group row my-3">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter Password'/>
</div>
</div>
<button type='button' className="mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
Try this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container my-auto w-50' style={{background-color:"#E8D2A6"}}>
<div class="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div class="form-group row">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter user id'/>
</div>
</div>
<div class="form-group row my-3">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
</div>
</div>
<div class="form-group row">
<button type='button' class="w-auto mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
</div>
I am making a simple login with bootstrap and I am having a problem dealing with this, here is my code:
<div class="container">
<div class="row justify-content-center no-gutters" style="padding-top:150px;">
<div class="col-lg-8">
<div class="card shadow-lg o-hidden border-0 my-5 mx-auto">
<div class="card-body">
<div class="row">
<div class="col-lg-6 p-0">
<div class="p-5">
<div class="text-center">
<h4 class="text-dark mb-4">Login</h4>
</div>
<form class="user">
<div class="mb-3">
<input class="form-control form-control-user" type="email" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Username" name="email">
</div>
<div class="mb-3">
<input class="form-control form-control-user" type="password" id="exampleInputPassword" placeholder="Password" name="password">
</div>
<button class="btn btn-primary d-block btn-user w-100" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the result:
Can somebody help? Thank you so much!
You have used 'col-lg-6'. On large screen it contains only half width of the row. If you remove this class There won't be any extra space. You can read more about grid system
I am creating a basic landing page and I am adding a small newsletter signup component. When adding the bootstrap input group template, the button comes out much larger than the input field.
This is the code so far:
<!-- Newsletter -->
<section class="bg-primary text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark btn-lg" type="button">Button</button>
</div>
</div>
</div>
</div>
</section>
This is the specific input group code:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark btn-lg" type="button">Button</button>
</div>
</div>
You can try to adjust the input field by adding a height on it. Like below
input.form-control {height: 38px}
<!-- Newsletter -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<section class="bg-primary text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark " type="button">Button</button>
</div>
</div>
</div>
</div>
</section>
You didn't do anything wrong. You either have to drop btn-lg class on the button or add input-group-lg alongside with input-group class. Both solutions are valid
here is an example of both solutions:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Large form input</h2>
<section class="bg-primary text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>
<div class="input-group input-group-lg mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark btn-lg" type="button">Button</button>
</div>
</div>
</div>
</div>
</section>
<h2 class="mt-5">Small form input</h2>
<section class="bg-primary text-light p-5">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Sign up for our Newsletter</h3>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-dark" type="button">Button</button>
</div>
</div>
</div>
</div>
</section>
I have this html using materialize css
<!-- Sign Up Card row -->
<div class="row">
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<span class="card-title"><h3>Sign up to find out more.</h3></span>
<form class="container">
<div class="input-field col m6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field col m6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- End of Sign Up Card row -->
Which is giving me this result
When I remove the col m6 classes from the input-field divs it shows them correctly within the card but stacked one on top of the other.
How do I achieve having both divs inside the card and positioned on the same row?
My UI Design of desired composition of card
Update
Working JSFiddle
Note: Modifying the css itself is undesired and a last resort. The prime solution should use only materialize css for which I think I should have been more specific.
use <div class="row"></div> to wrap around the div.col tags
jsfiddle
<!-- Sign Up Card row -->
<div class="row">
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<span class="card-title"><h3>Sign up to find out more about Two Lanterns.</h3></span>
<form class="container">
<div class = "row">
<div class="input-field col m6">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field col m6">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- End of Sign Up Card row -->
Try this way, replace container block with following code.
<form class="container" style="display: flex">
<div class="input-field ">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field " style="padding-left:16px">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit <i class="material-icons right">send</i>
</button>
</div>
</form>
I am new with this, especially with Bootstrap. I have this code:
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
I need to put this input field and button in the center of the page:
This didn't work: "margin-left: auto; margin-right:auto;"
Does anyone have any ideas?
You can use offsets to make a column appear centered, just use an offset equal to half of the remaining size of the row, in your case I would suggest using col-lg-4 with col-lg-offset-4, that's (12-4)/2.
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
Demo fiddle
Note that this technique only works for even column sizes (.col-X-2, .col-X-4, col-X-6, etc...), if you want to support any size you can use margin: 0 auto; but you need to remove the float from the element too, I recommend a custom CSS class like the following:
.col-centered{
margin: 0 auto;
float: none;
}
Demo fiddle
Try applying this style to your div class="input-group":
text-align:center;
View it: Fiddle.
The best way for centering your element it is using .center-block helper class. But must your bootstrap version not less than 3.1.1
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-3 center-block">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
Using offsets is not desired for responsive websites.
Use a flexbox with justify content center:
<div class="row d-flex justify-content-center">
<input></input>
</div>
Ok, this is best solution for me. Bootstrap includes mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. So this worked perfectly on every browser and device:
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4"></div>
</div><!-- /.row -->
It means 4 + 4 + 4 =12... so second div will be in the middle that way.
Example: http://jsfiddle.net/jpGwm/embedded/result/
For me this solution worked well to center an input field in a TD:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
<div class="form-group text-center">
<div class="input-group" style="margin:auto;">
<input type="month" name="p2" value="test">
</div>
</div>
</td>
Try to use this code:
.col-lg-3 {
width: 100%;
}
.input-group {
width: 200px; // for exemple
margin: 0 auto;
}
if it didn't work use !important
Well in my case the following work fine
<div class="card-body p-2">
<div class="d-flex flex-row justify-content-center">
<div style="margin: auto;">
<input type="text" autocomplete="off"
style="max-width:150px!important; "
class="form-control form-control-sm font-weight-bold align-self-center w-25" id="dtTechState">
</div>
</div>
</div>
For bootstrap 4 use offset-4, see below.
<div class="mx-auto">
<form class="mx-auto" action="/campgrounds" method="POST">
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="picture" placeholder="image url">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="description" placeholder="description">
</div>
</div>
<button class="btn btn-primary" type="submit">Submit!</button>
<a class="btn btn-secondary" href="/campgrounds">Go Back</a>
</form>
</div>
in b4 you can use d-flex justify-content-center too
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="d-flex justify-content-center">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>