• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 117
  • Last Modified:

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>

Open in new window


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;
}

Open in new window

0
Jazzy 1012
Asked:
Jazzy 1012
  • 2
1 Solution
 
Jazzy 1012Author Commented:
I did this jfiddle
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
0
 
Jazzy 1012Author Commented:
But with using vertical aligiment?
0
 
Julian HansenCommented:
Some notes
1. Your fiddle does not include Bootstrap so the bootstrap styles are not in effect
2. Your code is contained inside <ul> tags but with no <li> - so it is invalid
3. Your Forgot password is inside a col-md-11 - why not col-md12
4. You need to put your col- classes inside a row class container to get rid of the margin's the former create.

Something like this (assumes you included your Bootstrap CSS)
<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">
        <li>
          <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="row">
            <div class="col-md-12 text-right button password">
              <a href="forgot.php">Forgot your Password? </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Open in new window

Sample here
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now