In the following html code. Currently the label and textarea are in the same row I am trying to put the submit button exactly below the left corner of textarea, but it seems that my idea does not work:
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
</div>
</div>
<div class="form-group col-sm-6" style="float: right;">
<div class="col-sm-4" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
How should i fix it?
I am using bootstrap
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-9">
<textarea id="summernote" th:field="*{comments}" class="summernote "></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Simple!
Try removing the style float: right; for the outer div(form-group col-sm-6) with the button and it should work
Not sure what you were trying to do, just remove the styles and put the button after the textarea:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
<div>
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
</div>
Go with below link or just try below code may be it can help you -
JSFiddle
HTML Code
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote ">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Since you have an col-sm-3 for comments label you should remove the float and set the offset of col-sm-offset-3:
<div class="form-group">
<label for="comments" class="col-sm-3 control-label text-right">Comments</label>
<div class="col-sm-6">
<textarea id="summernote" th:field="*{comments}" class="summernote "></textarea>
</div>
</div>
<div class="form-group col-sm-offset-3 col-sm-6">
<div class="col-sm-4" style="float: left;">
<input type="submit" value="Submit The Feedback" class="btn btn-primary" />
</div>
</div>
Here is a bootply to test your code and snapshot:
Further check this out to better understand the grid structure with bootstrap.
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>
Good day! In my log in form, I want my text fields to put it in to center using bootstrap. I already used class="form-inline justify-content-center" but it isn't working.
Code:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
</div>
So far this is my output:
https://prnt.sc/h675qg / https://jsfiddle.net/kf2c8trp/
Thank you very much
Simply add this code to your CSS:
form {
text-align:center;
}
or as #Connum said, use text-center of bootstrap classes. Read more here
After adding the bootstrap css file to your fiddle and the class text-center to the form, your inputs are being displayed centered: https://jsfiddle.net/kf2c8trp/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
<form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
<br/><br/><br/><br/><br/><br/>
<p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
password to login.</p><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="text" name="username" id="email" class="form-control" placeholder="Username" style="border-radius: 25px;">
</div>
</div><br/><br/>
<div class="form-group">
<div class="col-xs-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
</div>
</div>
<br/><br/>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Firstly, you are doing a lot of things wrong. Trying to create space with <br/> when you should be using margin or padding is not really cool :). Also, Inline styling is highly discouraged and Justify-content-centre work with flexboxes. That being said check-out the working example below, I have changed some of your bootstrap class and add few scss link below:
<div class=" col-xs-12 container" >
<form class="col-xs-12" role="form" method="post" action="<?=base_url()?>login/login_submit" >
<p id="sign-lbl">Please enter your username and<br/>
password to login.</p>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="text" name="username" id="email" class="form-control" placeholder="Username">
</div>
</div><br/><br/>
<div class="col-xs-6 col-xs-offset-3 form-group">
<div>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
</div>
</div>
<span class="button-checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<a class="btn" data-color="info">Stay Signed In</a>
Forgot Password?
</span>
<div class="row">
<div class="col-xs-offset-3 col-xs-6 ">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
</div>
</div>
</form>
</div>
Check out the updated link
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 want to display the search button on the right of input text but it shows up below it. How can I show it on the right? Fiddle.
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
the button actually will not be inside the input field
you can just add margin-right:-10px fro the search button
find clean and working fiddel :here
<div class="row">
<div class="page-header col-md-12">
<h1 class="text-center">Search Teachers</h1>
</div>
</div>
<div class="row" style="margin-top:80px;">
<!--
<div class="col-md-4 col-md-offset-1 col-sm-4 col-xs-12">
<div class="ui-widget">
<label for="tags">Class: </label>
<input id="class">
</div>
</div>
-->
<form class="form-signin" id="Form1" action="search.php" method="post">
<div class=" col-xs-12" style="float:left;display:inline;">
<div class="ui-widget" style="float:left; margin-right: 10px">
<label for="city">City: </label>
<input type="text" id="city" name="city">
</div>
<button class="btn btn-default" type="submit">Search</button>
</div>
</form>
</div>
Add style="float:left; margin-right: 10px"
i have been creating a form by using bootstrap but the result is not ok for me. how can i make my form better?
<div class="row" ng-if="model.FieldType == customTypes.Select">
<div class="form-group">
<label class="control-label col-md-4">Seçim</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect"/>
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 pull-right">
<select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select>
</div>
</div>
</div>
</div>
If I'm right, you are looking for something like this. This code will fix alignment issue. How ever, I don't know the bootstrap way for setting top-margin. In this code, I'm using a custom css for setting top margin.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label class="control-label col-md-4">Seçim</label>
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+
</button>
</div>
</div>
</div>
<div class="col-md-8 col-md-push-4" style="margin-top: 4px">
<div class="form-group">
<select class="form-control"></select>
</div>
</div>
</div>
</div>