I want to remove the margin on top the form, so that it will have the same margin with the text on the left.
This is my code:
<div class="secound-top container">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 col-xl-12">
<h4 class="title"> Plain Page</h4>
<form>
<div class="input-group">
<input class="search-text" type="text" name="name" placeholder="search for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
</form>
</div>
image
Insert this into you CSS file or in the style tags:
body{
margin-top: 0px;
}
I have solved the error, I enclosed the form tag on a container div, then with a negative margin-top, the form went up:
There is the code:
<div class="container-fluid form">
<form>
<input class="search-text" type="text" name="name" placeholder="search
for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
CSS
.form{
margin-top: -30px;
}
Related
I am trying to center my <div class="loginfeld"> but I cant get it to go center (in the middle), while staying responsive.
<html>
<body>
<div class ="loginfeld">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron">
<center><h1>Hallo!</h1></center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername"
placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort"
placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name ="login">Login</button>
<center><p><?php echo $hinweis; ?></p></center>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</body>
</html>
In my css-style file:
.loginfeld{
margin-top: 250px;
margin-left: 750px;
max-width: 1000px;
}
It does go in the middle of my screen, but it's not really resposive. I tried to use codes which were written in the forum to responsively center it, but it did not work out for me.
Thats how it looks now, after I used the code K_LUN wrote down. It is centerd, but now the login box is messed up.
Bootstrap provides more than enough classes to achieve what you need with minimal custom CSS.
I deleted the additional col-lg-4 that you had at the start and end of the container; also added a row div since you should have col-* classes inside a row only.
After that, you can just add justify-content-center to the row to center the element, as well as align-items-center along with a custom property height: 100vh so the row uses the full height of the viewport.
.full-scrn {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="row justify-content-center align-items-center full-scrn">
<div class="col-10 col-md-8 col-lg-4">
<div class="jumbotron">
<center>
<h1>Hallo!</h1>
</center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name="login">Login</button>
<center>
<p>
<?php echo $hinweis; ?>
</p>
</center>
</form>
</div>
</div>
</div>
</div>
</body>
I don't know if you want it at the exact center of the screen(like from left,right,top,bottom) or just the horizontal center.
For the horizontal center, you can simply do-
.parent-element{
background: lightblue;
width: 300px;
height: 300
}
.centered-element{
margin: auto;
width: 200px;
height: 200px;
background: cyan;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent-element">
<div class="centered-element">
Sample Text
</div>
</div>
You can use grid offsets to keep a column centered:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1 class="text-center">Hallo!</h1>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name="login">Login</button>
<p class="text-center">
<?php echo $hinweis; ?>
</p>
</form>
</div>
</div>
</div>
Demo
Notice a few things:
Use text-center rather than additional markup for centering
Don't use line breaks for spacing. Use CSS (.jumbotron h1 {margin-bottom: 20px;})
I have this problem whereby my page style with bootstrap div container for the sign in forms and top portion logo, this part however covered or blank out my intended background image styled using CSS
html{
background: url("Bg1.jpg")no-repeat center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
margin:0;
}
and my the 2 containers where I place a logo on top and the sign in form in the middle
<div class="container"><!--top portion-->
<div class="row"> <!--logo portion-->
<div class="col-sm-3 col-xs-12">
<img class="image-responsive img-rounded" alt="B-Flight" src="Logo1.png" id="banner" />
</div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
</div><!--row-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4"></div><!--left column of whole page-->
<div class = "col-xs-12 col-sm-4">
<title>Login</title>
<form class="form-signin">
<h2 class="form-signin-heading align-center">Sign In</h2>
<label for="usrName" class="Titlefont">User Name</label>
<input type="text" id="usrName" class="form-control" placeholder="user name" required autofocus><br>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<br>
<button class="btn btn-link btn-block" type="button">Not registered? Sign up now</button>
</form>
</div><!--set alignment-->
<div class="col-xs-12 col-sm-4"></div><!--right column of the page-->
</div><!--row-->
</div> <!-- /container -->
And there photo of it screen shot
Appreciate if anyone be able to help out
Thanks
By default the background-color of body is set to white.
So when you style your html the body is not targeted and still white.
You might instead want to try using
html, body {
/* Your CSS goes here */
}
This should solve your problem.
i want to move my "Submit form" a little bit down. i have tried a lot but the problem doesn't seems to go away.....
<div class="form-group">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down">Submit form</button>
</div>
Button is too near with the other line:
Use this
HTML
<div class="form-group" style="margin-top:20px;">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down">Submit form</button>
</div>
Use a media query (form-group will add space itself on smaller viewports) and a custom class on the form-group div to add margin to the top.
See Snippet.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<hr>
<div class="container">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group lg-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="button" class="btn btn-success btn-block">Submit form</button>
</div>
</div>
</div>
Add an extra class to your button to avoid overriding bootstrap CSS and then simply add something like so
your HTML become :
<div class="form-group">
<button type="button" class="btn btn-success col-md-4 col-md-offset-4 pull-down mybutton">Submit form</button>
</div>
suggested CSS
.mybutton {
margin-top: 30px;
}
LIVE DEMO
Bootstrap: how can i make the panel-body align in center, but with the input-label align with left side of input text box?
<div class="panel panel-default">
<div class="panel-body" align="center">
<form role="form" id="password-form">
<div class="form-group full-width">
<label class="input-label" for="userId">Username <Id></Id>:</label>
<div class="input-group min-width-400">
<input class="form-control" type="text"
id="userId"
name="userId"
required="true"/>
</div>
</div>
<button id="closeBtn" type="button" class="btn btn-default">Cancel</button>
<button id="resetBtn" class="btn btn-primary" type="button" style="width:150px">Reset Password</button>
</form>
</div>
</div>
If I understand you well, you´re looking for .panel-body {margin: 0 auto; width: xxx} instead of your align attribute..
I have the following code...
<div class="row">
<div class="span6">
<h2>Some Text</h2>
</div>
<div class="span6">
<form class="form-inline pull-right">
<input type="text" class="input-large">
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
...but the search form doesn't align with the h2 tag. Do I need to have the form custom styled via css or am I missing out on some default Bootstrap class to fix this?
Thanks so much for taking time to read/answer this query.
[edit]
http://jsfiddle.net/nuB23/
Added jsfiddle
Try to add this style:
[class*="span"], h2 {
display: inline;
}
Updated Fiddle
Remove the pull-right class on the form.
The other issue is the h2 has extra padding and is a block level. I think what you are really after is this:
<div class="nav"> </div>
<div class="container">
<form class="form-horizontal ">
<div class="control-group ">
<label class="control-label large" for="searchInput">Label text:</label>
<div class="controls search">
<div class="input-prepend "> <span class="add-on"><i class="icon-search"></i></span>
<input type="text" id="searchInput" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</form>
</div>
http://jsfiddle.net/dbrin/AV654/