I am trying to place my input field directly to the left of the 3 buttons (the btn-toolbar) on the right side. I'm not sure why this is so difficult. I have tried changing the width of the input field and using various utility classes without success. Any help would be appreciated.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-sm-6">
<label class="control-label"> </label>
<input type="search" class="form-control"/>
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
In one row your columns have to add up to 12 as it is a 12 column grid in Bootstrap. I have made the input 2 columns and the buttons 4 columns.
I have also fixed the mobile size layout by adding 3 cols of 4 followed 2 cols of 6 and adding a 'form group' class around the input field.
Updated to add 'text-right' to the button columns, and remove 'button-toolbar' from around the three buttons.
Updated again to add more breakpoints, so the large screen size looks better.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2 col-lg-1 text-right">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-3 col-md-offset-1 col-lg-offset-2">
<div class="form-group">
<label class="control-label"> </label>
<input type="search" class="form-control"/>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-right">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
With some help from #k123, I was able to come up with a solution that seems to work okay. But if there is a better way to accomplish this, I'd be happy to choose a better answer.
I ended up putting the form-group into the last div and using the pull-left class to force it to the left of the buttons. It's definitely not the most ideal solution, but seems to look "well enough" on large displays.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-xs-6 col-sm-2">
</div>
<div class="col-xs-6 col-sm-4 text-right">
<div class="form-group pull-left">
<label class="control-label"> </label>
<input type="search" class="form-control" />
</div>
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Related
I am new for angular .I wrote below code and I expect below style format with my code but i can't achieve using my below code can some one help me to solve my issue.
home.component.html
<div class="card">
<form [formGroup]="userForm">
<div class="mt-5 box">
<div class="form-row">
<div class="col-md-12">
<div class="form-group mt-4">
<label>Type</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="type" class="form-control" placeholder="Type">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mt-4">
<label>Session</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="session" class="form-control" placeholder="Session">
</div>
</div>
</div>
<div class="form-row mt-4">
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="addItem()">Add</button> 
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</div>
</div>
</div>
</div>
</form>
<div class="col-md-8 mt-4 mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td><span>{{item.type}}</span></td>
<td><span>{{item.session}}</span></td>
<td><button type="button" class="btn btn-primary" (click)="removeItems(item)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
home.component.css
.box{
width: 50%;
border: 1px solid rgb(145, 138, 138);
border-radius: 25px;
padding: 0px 20px 20px 20px;
margin-left: 400px;
}
My Result
Expected
angular.json
I'm working on asp.net with bootstrap design.
I had implemented the modal pop-up on button click.
Unfortunately I'm facing the grey color over my pop-up and without any functionality working. If I click any where the modal pop-up is closing bu the grey color is always appearing until I do refresh.
My code :
<div class="table-responsive">
<table id="Table1" class="table">
<thead>
<tr>
<th>Type</th>
<th>Price</th>
<th>View</th>
<th>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Take Appointment</button>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Modal pop-up :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Appointment Details</h4>
</div>
<div class="modal-body">
<div class="row text-center">
<div class="col-sm-3 col-xs-3">
<div class="form-group">
<label class="control-label">Type Name:</label>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<asp:TextBox ID="txtName" runat="server" placeholder="Enter Type Name" class="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-3 col-xs-3">
<div class="form-group">
<label class="control-label">Price:</label>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<asp:TextBox ID="TextBox1" runat="server" placeholder="Enter Price" class="form-control"></asp:TextBox>
</div>
</div>
<div class="col-sm-3 col-xs-3">
</div>
</div>
<div class="input-group col-md-12 input-append" data-date-format="dd/mm/yyyy" id="divDateOfBirth">
<input class="date-picker form-control Datevalidate hasDatepicker" data-val="true" data-val-regex="Please enter valid value" data-val-regex-pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{4})$" data-val-required="Please enter valid value" id="txtRESIDENT_SINCE" maxlength="10" name="RESIDENT_SINCE" onkeypress="return isDate(event)" placeholder="dd/mm/yyyy" type="text" value="" autocomplete="off">
<!--<input id="date-picker-2" type="text" class="date-picker form-control">-->
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove" id="residentHideCal" onclick="clearCal(this)"></span>
</span><span id="SpanDob1" class="input-group-addon showdp">
<span class="glyphicon glyphicon-calendar" id="residentShowCal" onclick="showCal(this)"></span>
</span>
</div>
<div class="clockpicker">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>
</div>
</div>
<div class="modal-footer">
<button runat="server" class="btn btn-primary btn-sm" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My current result :
I have the following form and table that are side by side in 2 columns as shown here:
This form/table is based on datatable + materialize CSS.
I would like to have the Form and table in a div an make sure that bottom of table and form are always aligned.
I searched around without any solution.
Here goes my code:
<div class="divider"></div>
<!--Basic Form-->
<div id="basic-form" class="section">
<div class="row">
<div class="col s12 m4 l4">
<div class="card-panel">
<h4 class="header2">Add or Modify</h4>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s2">
<input type="number" id="id" name="id" class="form-control" placeholder="Id" />
<label for="id">Id</label>
</div>
<div class="input-field col s10">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
<label for="nm">Product</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="number" step=".01" placeholder="0.00" id="em" name="em" class="form-control" />
<label for="em">Win</label>
</div>
<div class="input-field col s6">
<input type="number" step=".01" id="hp" name="hp" class="form-control" placeholder="0.00"/>
<label for="message">Drop</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
<label for="ad">Currency</label>
</div>
<div class="row">
<div class="input-field col s12">
<button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
<button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form with placeholder -->
<div class="col s12 m8 l8">
<div class="card-panel">
<h4 class="header2">Products In DB</h4>
<div class="row">
<table id="table1" class="table table-bordered table-striped table-hover display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20">ID</th>
<th>Product</th>
<th>Win</th>
<th>Drop</th>
<th width="100">Currency</th>
<th width="100">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Add the css code which will help to solve the issue::
.section .row {
display: flex;
display: -webkit-flex;
display: -moz-flex;
word-break: break-word;
}
.section .card-panel {
height: 100%;
}
I have one modal in my new web application ,I want to print the modal content,the modal is scrollable.Now i can only print the content that is viewable.What are the corrections that i should make in my style.css.
index.html
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 ALIGN="center" class="modal-title">MR FINANCE</h4>
</div>
<div class="modal-body" >
<div class="row">
<div class="col-xs-6">
<div class="form-group">
Name:<input type="text" ng-model="cstmrname" class="form-control" placeholder="Jane Doe" >
</div>
<div class="form-group">
Phone:<input type="number"ng-model="cstmrphone" class="form-control" placeholder="8086502009">
</div>
</div>
<div class="col-xs-6 ">
<div class="text-right">
<p ><STRONG >GLID:{{(GLID.GLID-0)+1}}</STRONG></p>
{{date | date:'MM-dd-yyyy'}}<br/>
{{place}}
</div>
<div class="form-group">
Address: <textarea type="text" class="form-control" ng-model="cstmradress" rows="2"></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h4 align="center">
Ornaments
</h4>
<form class="form-inline form-group">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="form-group">
<select class="form-control" id="optioin1" ng-model="choice.option1" >
<option value="Ring" >Ring</option>
<option value="Earings" >Earings</option>
<option value="Chains">Chains</option>
<option value="Necklaces">Necklaces</option>
<option value="Bangles">Bangles</option>
</select>
</div>{{choice.option1}}
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">gm</span>
</div>
</div>
<div class="col-xs-4 pull-right">
<button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
<button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="text-left"> Total Numbers:{{ choices.length}}</p>
</div>
<div class="col-xs-6"><p>Total Weight: {{total(number)}}gm</p>
</div>
</div>
<hr>
<form align="center" class="form-inline">
PledgeAmt:
<div class="input-group">
<input type="number" ng-model="pledgeamt" class="form-control" placeholder="{{(total()*2050)-3000}}-{{total()*2050}}" >
<span class="input-group-addon" id="basic-addon2">RS</span>
</div>
</form>
<hr>
<div class="row">
<h5 align="center"> Interest</h5>
<div class="col-xs-6">
<p> 1-3Month:{{ intrst[0].INTR1}}%({{(pledgeamt/100)*1}}RS/day)</p>
</div>
<div class="col-xs-6">
<p > 3-12Month:{{ intrst[0].INTR2}}%({{(pledgeamt/100)*2}}RS/day)</p>
</div>
</div>
<tr ng-repeat="ornament in data">
<td>{{ornament.GLID}}</td>
<td>{{ornament.WEIGHT}}</td>
<td>{{ornament.TOTGRAM}}</td>
</tr>
<div class="modal-footer">
<button type="button" ng-click="insertvalue()" class="btn btn-default" >Submit</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
style.css
.printable { display: none; }
#media print
{ .modal-footer,
.non-printable { display: none; }
.printable1 {
width: auto;
height: auto;
overflow: visible !important; }
}
You implementation of your css is the right approach but you will need to make whatever the class that currently has the scroll, visible when you print out the document.
If you wanted the css to be changed but not the html:
#media print {
/* if modal-body is your scrollable class */
.modal-body {
width: auto;
height: auto;
overflow: visible !important;
}
}
Code pen link
I am using bootstrap and i am new to it . I made this page but why my radio buttons are not aligned properly in left in small devices like iPhone4. Please tell me the reasonfor the same and thanks in advance.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Acarrot Do! Sign Up</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/custom.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".affix" data-offset="50">
<header class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;"> </div>
<div class="col-xs-6 col-sm-8 col-md-8 text-center">
<h4>Do This. Get That.</h4>
</div>
<div class="col-xs-3 col-sm-2 col-md-2 text-right"> </div>
</td>
</tr>
</table>
</div>
</div>
</header>
<nav class="navbar">
<div class="container-fluid text-center navbar-static-top">
<p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p>
</div>
</nav>
<!-- Tabs Ends -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
<!-- Title Ends -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6">
<div class="panel-body">
<p class="big">I am a</p>
<form>
<div class="form-group">
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span></label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Teacher</span></label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Parent</span></label>
</div>
<p class="big">Hello <span class="dark-green-text">Teacher,<br>
<br>
Please Use your school Email ID</span></p>
<div class="form-group">
<input class="form-control input-lg" id="Email" type="text"
style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"
placeholder="School Email ID">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password9" type="text" placeholder="Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password" type="text"
placeholder="Confirm Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p>
</label>
</div>
<table style="width:100%;"
cellpadding="2" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td style="text-align:center;"><a href="signup.html">
<button type="button" class="btn btn-main" style="width:125px;">Sign Up</button>
</a><br>
<br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table style="text-align: center; width: 100%;"
cellpadding="2" cellspacing="2">
<tr>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
<td width="10%"><p class="big"">or</p></td>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50px"> </td>
</tr>
<tr>
<td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br>
Sign
Up with Google+</a></td>
</tr>
</table>
</form>
</div>
</div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
</div>
<!-- Content Ends -->
<footer class="container-fluid text-center"> About UsHow do! works<a href="contact.html">Contact
Us</a>
</li>
</ul>
</footer>
</body>
</html>
Remove this span from the label and write the text directly inside it
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span>
Set the grid column classes at the level of the <label> and not the nested <span> tag:
<div class="form-group">
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Student</span></label>
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Teacher</span></label>
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Parent</span></label>
</div>
See the given below edited code. It's solution I think.
Only you have to delete SPAN inside LABEL or else delete the classes of that SPAN
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Acarrot Do! Sign Up</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/custom.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".affix" data-offset="50">
<header class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;">
</div>
<div class="col-xs-6 col-sm-8 col-md-8 text-center"><h4>Do This. Get That.</h4></div>
<div class="col-xs-3 col-sm-2 col-md-2 text-right"> </div>
</div>
</header>
<nav class="navbar">
<div class="container-fluid text-center navbar-static-top">
<p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p>
</div>
</nav>
<!-- Tabs Ends -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
<!-- Title Ends -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6">
<div class="panel-body">
<p class="big">I am a</p>
<form>
<div class="form-group">
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Student</label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Teacher</label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Parent</label>
</div>
<p class="big">Hello <span class="dark-green-text">Teacher,<br><br>Please Use your school Email ID</span></p>
<div class="form-group">
<input class="form-control input-lg" id="Email" type="text"
style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"
placeholder="School Email ID">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password9" type="text" placeholder="Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password" type="text"
placeholder="Confirm Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="checkbox">
<label><input type="checkbox">
<p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p></label>
</div>
<table style="width:100%;"
cellpadding="2" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td style="text-align:center;"><a href="signup.html">
<button type="button" class="btn btn-main" style="width:125px;">Sign Up</button>
</a><br><br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table style="text-align: center; width: 100%;"
cellpadding="2" cellspacing="2">
<tr>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
<td width="10%"><p class="big"">or</p></td>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50px"> </td>
</tr>
<tr>
<td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br>Sign
Up with Google+</a></td>
</tr>
</table>
</form>
</div>
</div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
</div>
<!-- Content Ends -->
<footer class="container-fluid text-center">
About UsHow do! works<a href="contact.html">Contact
Us</a></li>
</ul>
</footer>
</body>
</html>