The button extends out past the div between small and medium (576-768) screens. Cannot figure out why.
<div class="container">
<div class="row freebie">
<div class="col-sm-6 pic42">
<img src="./Resources/images/42_questions.png" class="imgfree" alt="Responsive image">
</div>
<div class="col-sm-6">
<form>
<div class="mb-3">
<label for="name" class="form-label">Your name</label>
<input type="name" class="form-control" id="ame" aria-describedby="name">
<div id="name" class="form-text">We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Your email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary mb-2 m-2 ">Send my cheatsheet</button>
</div>
</form>
</div>
</div>
</div>
</div>
There's no CSS specific to the form.
Attribute style="overflow: hidden" on that button div should work, hope it helps.
Related
I have the following form code:
<div id="site" class="container-fluid">
<div class="row">
<div class="my-4 offset-3 col-6 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-2 col-form-label">Username</label>
<div class="col-4">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username" />
</div>
</div>
<div class="form-group row">
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-4">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password" />
</div>
</div>
<div class="form-group row">
<div class="col-2"></div>
<div class="col-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want the form to be centered on the page, but instead, it's still further to the left than center as shown by this screenshot:
I thought my math was correct: Bootstrap uses a 12-column grid, so by using a 3-column offset, and a 6-column content area, I'd have essentially two 3-column gutters on each side. And by specifying the form rows to add up to 6-columns (2-column labels and 4-column inputs), the form would fill the 6-column content area, thereby automatically centering itself. But I'm obviously wrong.
So, what can I do to actually center this thing? And to make it 6 columns wide (because, judging by the screenshot, it isn't)?
The form is horizontally centered, but it's only half the width of it's parent. The issue is...
"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"
Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...
<div class="container-fluid">
<div class="row">
<div class="my-4 offset-4 col-4 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-3 col-form-label">Username</label>
<div class="col-9">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-3 col-form-label">Password</label>
<div class="col-9">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
</div>
</div>
<div class="form-group row">
<div class="col-3"></div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
https://www.codeply.com/go/b4FE5qflxS
Related: Center the content inside a column in Bootstrap 4
You can accomplish this by using col-6 and justify-content-center. All you have to do is setup the elements, rows and columns with bootstrap.
Here is an example of centering the form group:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="site" class="container-fluid">
<div class="row justify-content-center">
<div class="col-6" style="background: #eee;">
<!-- formgroup start -->
<form>
<div action="/some/path" class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="_username" required="required" autocomplete="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="_password" required="required" autocomplete="current-password" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="remember_me" name="_remember_me" value="on" />
<label class="form-check-label" for="remember_me">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" id="_submit" name="_submit">Submit</button>
</form>
<!-- formgroup end -->
</div>
</div>
</div>
Reference these pages on the Bootstrap 4 documentation
https://getbootstrap.com/docs/4.1/layout/grid/
https://getbootstrap.com/docs/4.1/components/forms/
Here's what I mean.
I have a log in button on the top right of the page, and the title of the page centered in the middle.
However, the only way I found to center the tile on the div, was the center the div itself on the page, which was col-md-9.
I tried using CSS to center the Div, but I couldn't make it work, so the workaround I found was the center the div by using another column before the column where the Title is positioned.
However, this new div is completely empty. I might put a logo in it later on, but I planned for the top right of the page to be empty.
Is there something bad with having empty divs?
Is there a better way to implement this?
Code for reference.
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h1 id="TEXT">OH SNIP</h1>
<br>
</div>
<div class="col-md-3">
<div class="dropdown">
<button id="dpBt" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
<form id="logIn" action="api/users" method="POST">
<div class='form-group'>
<label for='username' class='sr-onl'>Username</label>
<input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
</div>
<div class='form-group'>
<label for='password' class='sr-onl'>Password</label>
<input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
</div>
<div class='form-group'>
<button id="btnLogin" class='btn btn-block'>Login</button>
</div>
</form>
<hr>
<input id="btnRegisto" type="button" class="btn btn-block" value="Sign up">
<br>
</div>
</div>
</div>
</div>
You could leave blank columns, but a better approach provided by Bootstrap is to use offsets.
Here is an example from Bootstrap 3.3
https://getbootstrap.com/docs/3.3/css/#grid
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Here's an example that better fits what your trying to do. Notice the offset for the button.
<form class="form-horizontal" method="post" action="/login/">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="id_username" name="username" value="" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" value="" placeholder="Password">
</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>
A bit of a beginner's question, I am trying to make my form to look like the following image where the text on the left are vertically aligned and the input field has the same widths.
twitter form
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="d-inline">Full Name: </label>
<input type="text" placeholder="First Name" formControlName="firstName">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label class="d-inline">Email: </label>
<input type="email" placeholder="Email" formControlName="email">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
Which gives me the following result. I also want the input to stretch to the remaining parent container so that it stops before the "some text".
my attempt
I have tried to set the width css property of the input field to 100% hoping that it will do it. However, that just stretch it all the way which forces it to go to the next line.
I am using bootstrap 4 with Angular2.
Just give your p tag a min-width. I gave the input a max-width so it's better when your screen size is smaller. Hope this answers your question
p.d-inline {
min-width: 75px;
display: inline-block;
text-align: right;
margin-left: 30px;
}
h6 {
margin-left: 30px;
}
input {
max-width: 100px;
}
You said you are using Bootstrap.
Why not Use Bootstrap Form then?
You can find how-to HERE
Open the following snippet in Full Page to see how it works
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-lg-1 control-label">Email</label>
<div class="col-lg-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-lg-1 control-label">Password</label>
<div class="col-lg-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-2">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-3">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
As form-horizontal is not working as expected in bootstrap 4 so, you can try like this.
<div class="container">
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Full Name: </label>
<div class="col-md-9">
<input class="form-control" type="text" placeholder="First Name" formControlName="firstName">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Email: </label>
<div class="col-md-9">
<input class="form-control" type="email" placeholder="Email" formControlName="email">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
http://jsfiddle.net/0y8oy7gf/2/
I have a Bootstrap 3 form in which I have a popover that is placed at the right of the first text input. The popover is triggered on focus of that input, and the trigger is working correctly. My problem is that I'd like for the popover to be wider so that I can have longer lines of text, but it seems to be contained within the parent .col-xs-6. Is there any way to have it be contained by .container-fluid instead, so that it can occupy the empty space on the right?
HTML is below, and the above jsfiddle demonstrates the problem. Thanks!
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
You simply need to set the data-container attribute to tell the popover which element to use as it's containing element (see the documentation):
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-container=".container-fluid" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/0y8oy7gf/3/
I am trying to center a form in the center of the page, but everytime I center the col, the contents get pushed to the left side of that col. I want the form to be the full width of the col-md-6 and that col centered in the middle of the page.
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-2">Your Name:</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Email:</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Company:</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required="" placeholder="Company Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Contact:</div>
<div class="col-md-4">
<input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Choose file(s):</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</div>
</div>
http://www.bootply.com/OiRABZIff0
Add col-md-offset-3 before col-md-2.
Have a look at the bootply here
Also not that col should be defined within rows and rows should be encapsulated within container, so I modified the html structure a bit as well.
Change your
<div class="col-md-6 col-md-offset-3">
to
<div class="col-md-7 col-md-offset-4">
I have edited. check out this help you.
http://www.bootply.com/QnYcyyIh2V