my english is so bad. Bear with me.
I cant move de position of a button submit. All styles have no effect.
This is the code (html, bootstrap 3):
<body>
<div class="row">
<div class="col-sm-12">
<!-- LOGO -->
<div class="col-sm-3">
<img src="../web/assets/img/logo-biblioteca.png" alt="Biblioteca Virtual">
</div>
<!-- BUSCADOR -->
<div class="col-sm-8">
<div class="well" >
<form class="form-group" action="">
<div class="col-sm-1" style="margin-top: 0.5%">
<label for="titulo"><b> TÃtulo </b></label>
</div>
<div class="col-sm-11">
<input class="form-control" type="text" placeholder="Ingrese un titulo" name="titulo" required>
</div>
<div class="col-sm-1" style="margin-top: 2.5%">
<label for="autor"><b> Autor </b></label>
</div>
<div class="col-sm-11" style="margin-top: 2%">
<input class="form-control" type="text" placeholder="Ingrese un autor" name="autor" required>
</div>
<div class="text-right row">
<button class="btn btn-info btn-md" type="submit">Buscar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
I cant move the button Buscar.
Please tell us more information, but you can also attempt to try this when using inline styling: !important;
Example..
<div id="placement" class="text-left"> <!-- text-center, text-right works too. -->
<button here>button</button>
</div>
This should work with Bootstrap, if you have it installed properly.
You could also attempt to put a float:left/right on the button itself and see what happens.
Related
I'm using Bootstrap 3 and I have set up this grid for my webpage:
<div class="container">
<div class="header">
<div class="top-nav">
<div class="row">
<div class="col-1">
<img src="https://sitename.com/logo.jpg">
</div>
<div class="col-7 mid-nav">
<!-- Search box & Navbar comes here -->
</div>
<div class="col-1" style="margin-top:30px !important;">
<i class="fa fa-shopping-cart fa-4x sabad-kharid"></i>
</div>
<div class="col-3">
<form method="POST" action="">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
And the result is shown in this:
As you can see the Bootstrap form does not appear in the col-3 class and it appears at the below of this row. However it should be placed at the left side in the div with class of col-3.
So what's going wrong here? How can I solve this issue?
You should use col-xs-1 col-xs-7 col-xs-3 in your class (instead col-7) or any size and display what you want.
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>
<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
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 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.