Jazzy 1012
asked on
Bootstrap css to change alignment without using padding
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#">
<img src="logo-small.png" ></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<div class= "text">
<input type="text" name="username" id="username" class= "input" placeholder="Username" value="" required>
<input type="password" name="password" class= "input" id="password" placeholder="Password" required>
<button type="button" class="btn btn-primary">Sign-in</button>
</div>
<div class="col-md-11 text-right button password">
<a href="forgot.php">Forgot your Password? </a>
</div>
</ul>
</div>
</div>
</div>
My username and password, are all the way to the top of the page, how can I center them and make forgot password be under password?
My css:
#custom-bootstrap-menu.navbar-default .navbar-brand
{
color: rgb(255, 255, 255);
text-transform: uppercase;
font-family: 'Times New Roman' , Times, serif;
font-size: x-large;
font-weight: bold;
padding-bottom: 65px;
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
border-width: 1px;
border-radius: 0px;
background: #333;
background: rgba(51, 51, 51, 0.1);
border: 0;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a
{
background-color: rgba(248, 248, 248, 0);
color: #FFFFFF;
padding-top: 30px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:hover, #custom-bootstrap-menu.navbar-default .navbar-nav > li > a:focus
{
color: rgb(153, 255, 204);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #888;
}
ASKER
But with using vertical aligiment?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
https://jsfiddle.net/jasmine825/ezs9ncyc/
there is an image on the right, I want there to be padding instead it being stuck to the top