Cannot set input and submit form in the middle of container - html

I want to align a form in the middle of a container. Then set input bar to be as wide as half of that container. Here is my code.
<div id="sub" class="col-6 d-flex justify-content-center">
<div class="d-flex">
<form id="form" action="https://www.freecodecamp.com/email-submit.">
<div class="form-group">
<input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>


Can you try to put your code into row?
<div class="container">
<div class="row d-flex justify-content-center">
<div id="sub" class="col-6">
<div class="d-flex">
<form id="form" action="https://www.freecodecamp.com/email submit.">
<div class="form-group">
<input id="email" class="form-control text-center"
type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>
<div>
</div>


This should help.
#sub{
width:100%;
border:1px solid #ccc;
height:400px;
align-items:center;
}
.form-wrapper{
width:50%;
}
input{
width:100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="sub" class="d-flex justify-content-center align-items-center">
<div class="form-wrapper">
<form id="form" action="https://www.freecodecamp.com/email-submit.">
<div class="form-group">
<input id="email" class="form-control text-center" type="email" placeholder="Enter your email">
</div>
<div class="d-flex justify-content-center pt-3">
<input id="submit" class="btn btn-primary" type="submit">
</div>
</form>
</div>
</div>

Related

Why this button is not getting center?

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>

Inline input and button

Please, how can I inline a button and an input field without using <form>? I'm trying this way but it's not working.
.inline-button .inline-input{
vertical-align:middle;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>

I changed the form to a div and removed the additional CSS. I've also included the Bootstrap library because it appears that's what you're using.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number" />
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber" />
</div>
<button type="" class="btn btn-primary mb-2">Populate</button>
</div>

you can use
.col-md-2 > div {
display: inline;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>

How to delete the space between these two elements with bootstrap grid

Here is the code of a login form on which I'm working on:
<main>
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-6">
<h3 class="display-3">Sign In<h3>
<form class="justify-content-md-center">
<div class="col-md-auto">
<input type="text" required placeholder=" Username"
style="font-family:Arial, FontAwesome">
</div>
<div class="col-md-auto">
<input class="margin-25px" type="password" requires
placeholder=" Password"
style="font-family:Arial, FontAwesome">
</div>
<div class="container-fluid row justify-content-md-center">
<div class="col-sm">
<img class="icon" src="images/check-box.svg"
alt="check-box">
</div>
<div class="col-auto">
<p>Forgot your password?</p>
</div>
</div>
<button class="login__button btn btn-primary" type="submit">
LOGIN
</button>
</form>
</div>
</div>
</div>
</main>
I tried to do the layout with bootstrap grid, but can't find how to nest these two object, which are image with the class icon and the paragraph.
how it looks in chrome

You may use the following lines:
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Login">
</div>
<div id="register-link" class="text-right">
Forgot your password ?
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I already found it in the codepen and I can't remember the author's name to mention here.

Vertical center align for a button in panel header with Bootstrap

I'm working on a Bootstrap 4 HTML page. I put a button in a panel header:
I need to put the button (and the title) in the middle of the panel header. How can I achieve this goal?
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-4 ">
<div class="card">
<div class="card-header">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary float-right" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>
Thanks

Try using display: flex; for your card header which is available in bootstrap and also instead of using float-right you can use ml-auto to move the button to the right (With the use of flex there is no need to use float properties). Hope this code helps
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container p-4 ">
<div class="card">
<div class="card-header d-flex flex-row align-items-center">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary ml-auto" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a></div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>

Just add display flex to your card-header class, then align-items: center
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
display: flex;
justify-content: space-between;
align-items: center;
}

Bootstrap: How can I put a line break between the textarea and button?

This is the bootstrap page
<div id="cover-caption">
<div id="container" class="container-fluid">
<div class="row d-flex">
<div class="col-lg-10 offset-sm-1 text-center"><br>
<h1 class ="font-weight-bold">Classes</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<input type="text" class="form-control" placeholder="Class Name">
</div><br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title">
</div><br>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Notes"></textarea>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<br>
</div>
</div>
</div>
</div>
</div>
Here is my CSS:
#cover {
background: #222 url('') center center no-repeat;
background-size: cover;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
I want to put a line break between the textarea and button, and <br> doesn't work. Can someone explain why and help me fix it

Are you looking for <hr> ? or simply <br><br> ?
Or you could put style="padding-top: 10px;" on the button...
Have a great day.
EDIT:
removed form-inline class from form tag, replaced with span (you'll need to fix the centering):
<div id="cover-caption">
<div id="container" class="container-fluid">
<div class="row d-flex">
<div class="col-lg-10 offset-sm-1 text-center">
<br>
<h1 class="font-weight-bold">Classes</h1>
<div class="info-form">
<form action="">
<span class="form-inline justify-content-center">
<div class="form-group">
<input type="text" class="form-control" placeholder="Class Name">
</div>
<br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title">
</div>
<br>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Notes"></textarea>
</div>
</span>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<br>
</div>
</div>
</div>
</div>
</div>

I finally understand your problem.
You are letting the bootstrap CSS form to override your button. You dun need to change anything instead just put the button outside the form.
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<input type="text" class="form-control" placeholder="Class Name">
</div><br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title">
</div><br>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Notes"></textarea>
</div>
</form>
<button type="submit" class="btn btn-warning">Submit</button>