I'm newbie using bootstrap, so I would like you help to center these couple of textBoxes and the button. I appreciate if there any other enhancement I can do with the code
This is part of the code I did and I'm using this as template: https://github.com/BlackrockDigital/startbootstrap-agency
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
</div>
The final idea is to have something like this:
login
You can use Flex too, see this link to more information: https://getbootstrap.com/docs/4.0/utilities/flex/
Basically, you can use <div class="d-flex justify-content-center">...</div> to center your div. In my opnion you can use grid to define the macro layout of your view, for example, use grid to define the number of columns in one component of your view and inside this component you can use flexbox. This approach make the view more responsive. And if you understand flexbox you can do anything. I hope this help you. Good luck.
Hope this can help you. Just add "m-auto" class to col-md-6
<div class="row">
<div class="col-lg-12 text-center">
<form method="post" action="">
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="form-control" type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
</div>
</div>
<div class="col-md-6 m-auto">
<div class="form-group">
<input class="btn btn-primary btn-xl text-uppercase" type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</form>
</div>
<div class="text-center"><!-- Code goes here --></div>
Related
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>
I have a form that looks like this (on a big device, e.g. pc monitor)
that is as it should be. On smaller devices it however looks like this:
the button is no longer in the same line as the input. My code looks like this:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
How can I ensure that it also is aligned correctly when using smaller devices?
PS: Bootstrap is being used
Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-xs-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-xs-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
<a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
</div>
</div>
</div>
</div>
Have you tried stacking the bootstrap col classes?
The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.
You could also consider putting them in the same div.
Your code modified with stacked col classes:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10 col-sm-6">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2 col-sm-6">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</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 would like to create a form and have it vertical. However on my computer the fields are all inline:
<div class="container">
<div class="col-sm-6 col-md-offset-3">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-6 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-6 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>
I would like a slightly more narrow form as seen in the code. class="form-horizontal" does not help at all. Picture below shows the result!
Reduce the parent container class to col-sm-3 and increase the child container's class to be col-sm-12.
So the parent container will have 25% width while the child containers will occupy the full width(100%) of the parent.
Readjust the centering of the form by modifying the offset-* classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-3 col-sm-offset-4">
<form role="form" ng-submit="submit()" ng-controller="formCtrl">
<div class="col-sm-12 form-group">
<input type="email" data-ng-model="form.email" placeholder="your#email.here" class="form-control">
</div>
<div class="col-sm-12 form-group">
<input type="password" data-ng-model="form.password" placeholder="password" class="form-control">
</div>
<div class="col-sm-4 form-group">
<button type="submit" class="btn btn-success">sign in</button>
</div>
</form>
<div id="messages"></div>
</div>
</div>
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.