Form Input Style

Form Input Style

by Hilarius Doren

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="http://www.friendandfan.com/Images/FriendAndFanLogo.png" alt=""></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        
          <ul class="nav navbar-nav navbar-right">
                            
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
              <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> &nbsp;&nbsp; </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
          
                    
        </div><!--/.nav-collapse -->
      
    </nav>
    
<div class="container">
<div class="row">
    <div class="col-md-6 col-md-offset-3">

        <p class="main_heading">Start building your project!</p>

        <p class="sub_heading">
            Add a story, picture and other important details
        </p>
                
                <form class="form-horizontal" role="form">
   ...

CSS

.navbar-default {
 	 background-color: white; 
  	 border-color: #e7e7e7;
	 }
	 
	.glyphicon{
    font-size: 25px;
	color:#f42837;
	}
   .main_heading {
	  color: #000000;
	  font-style: Normal;
	  font-family: 'Lato', Calibri, Arial, sans-serif;
	  font-size: 34px;
	  font-weight: 700;
	}
	
  .sub_heading {
	  color: #000000;
	  font-style: Normal;
	  font-family: 'Lato', Calibri, Arial, sans-serif;
	  font-size: 24px;
	  font-weight: Lighter;
  }
  
  .form-horizontal .control-label{
	/* text-align:right; */
	text-align:left;
	}

    .container {
        border: 1px solid #D8D8D8;
        border-radius: 3px;
    }
    .form-group 
    { 
      background-color: #F2F2F2; 
      padding: 10px 0;
    }