I have my aspx code here:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="SearchCustomer.aspx.cs" Inherits="WebApplication1.eyeofheaven.SearchCustomer" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="StyleSheets/SearchCustomerStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<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>
<title>Search Customer</title>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="twelve columns">
<!-- Header-->
<div class="container">
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle active" href="#">Search<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Search Form(Customer)</li>
<li>Search Form(Vehicle)</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Search form customer-->
<div id="searchcustomer" class="page-header">
<h3><span class="glyphicon glyphicon-th-large"></span>Search Customer</h3>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" runat="server" id="search" size="20" class="form-control" placeholder="Customer ID">
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Country">
<option value="select" selected disabled>Search by Country</option>
<option value="A:C ESTUDIO">A:C ESTUDIO</option>
<option value="Aaron McEwen-194712">Aaron McEwen-194712</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Currency">
<option value="selected" selected disabled>Search by Currency</option>
<option value="AUD">AUD (Australian Dollar)</option>
<option value="EUR">EUR (Euro)</option>
<option value="GBP">GBP (United Kingdom Pounds)</option>
<option value="JPY">JPY (Japan Yen)</option>
<option value="NZD">NZD (New Zealand Dollar)</option>
<option value="USD">USD (United States Dollar)</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" runat="server" onserverclick="Button1_Click" id="searchinfo" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search Info</button>
<button type="button" runat="server" onserverclick="Button2_Click" id="Button2" class="btn btn-danger"><span class="glyphicon glyphicon-repeat"></span>Reset</button>
</div>
</div>
<!-- Information Table-->
<div id="gridview">
<asp:GridView runat="Server" id="data" CssClass="table table-striped table-bordered table-responsive">
</asp:GridView>
</div>
</form>
</body>
</html>
And my css style here:
#searchcustomer{
margin-top:51px;
text-align:center;
background-color:#3399FF;
}
#gridview {
margin: 20px;
}
#data {
display: block;
height:400px;
overflow-y: scroll;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#data table,
#data thead,
#data tbody,
#data th,
#data td,
#data tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#data thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#data tr { border: 1px solid #ccc; }
#data td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#data td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
}
The output is okay when viewed on website:
But when viewed on mobile the output is like this:
All of my "th" seems to display before my all my "td"
How do I revised my css to make an output not like this. I want to make my table when viewed on mobile (It will get the th and td display)
Example:
When viewed on mobile:
The output is:
(First it will display the th tag "IDCustomer" and next to it is the td which is "253433")
(Image below)
Note:(I just edited this image on paint to further explain my question.)
How Do I design a css style like this?
You have to use responsive solution for this :
solutions here
Related
The footer of the main page appears just below the autogenerated menu bar at the top of the page and interferes with the div in my main page. It doesn't happen in the other pages which tips me off that something is wrong in the main page but I can't see what that is. Also, when I zoom out the content seems to veer off to the right and I don't know why.
I have given ample bottom margin to the footer and I can see the flex container div doesn't reach all the way to the bottom.
Index.cshtml
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#myMap {
width: 30vw;
height: 30vh;
}
.flex-container {
margin: auto;
position: fixed;
display: flex;
padding-top: 10px;
width: 80vw;
margin-bottom: -115px;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
width: 49%;
max-width: 49%;
}
.flex-child:first-child {
margin-right: 20px;
width: 49%;
width: auto;
height: auto;
max-width: 49%;
}
</style>
<!--<script src="~/lib/jquery/dist/jquery.min.js"></script>-->
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js" defer></script>
</head>
<div class="flex-container">
<div class="flex-child left">
<h2>Bing Maps integration in ASP.NET</h2>
<h4>Select sector:</h4>
<select id="mapMenu" multiple="multiple" style="width:300px">
<option value="0">Building</option>
<option value="1">Machine</option>
<option value="2">Grid</option>
<option value="3">IT</option>
<option value="4">Power</option>
<option value="5">Platform</option>
</select>
<div id="myMap"></div>
</div>
<div class="flex-child right">
<div id="infoPane"></div>
</div>
</div>
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - ®</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("My Tool", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Data Entry", "DataEntry", "Home")</li>
<li>#Html.ActionLink("View Entries", "ViewEntries", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer style="position:relative; height: 50px; width: 100%;">
<p>© #DateTime.Now.Year - Schneider Electric®</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I added the footer style tags but they did not help. Any ideas?
Apparently, my hunch was confirmed and the styling of the Layout and Index are interfering.
The solution I found is to replace the footer in Layout with a section using RenderSection("Footer", false) and then generate it the section in every page separately by doing:
At bottom of Index.cshtml:
...
#section Footer
{
<footer>...</footer>
}
For more info and an example on using RenderSection():
Here
This question already has answers here:
How to make this Header/Content/Footer layout using CSS?
(7 answers)
Closed 6 years ago.
I want to set header fixed at the top and footer at the botom of the page.
Image:
index page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
css code:
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?
As I can see you are using Bootstrap you could use one of its templates.
Take a look at this one:
http://getbootstrap.com/examples/sticky-footer-navbar/
Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.
Hope this helps,
Regards
.footer .form {
margin-top: 100px;
position:fixed;
bottom:0px;
}
replace this code to fix your footer
I'm not an expert but you could try using:
Position: fixed;
Or
Position: bottom;
Hope this helps!
I'm trying to display the following code. It's working fine in Chrome and Safari, but not working properly in Firefox. The code link: http://jsfiddle.net/nvarun123/fv4jxo4t/26/
Html code:
<div>
<a>
<button (click)="decrement()" class="btn btn-primary" style="float: left;">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>
CSS code:
div {
position:relative;
border: 1px solid #CACEDB;
width: 162px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:3px;
}
input {
text-align: center;
height:100%;
width:100%;
border:none;
}
input:focus {
outline: none;
}
button {
height:100%;
border:none;
}
button:hover {
background-color: green;
}
button:active {
background-color: #015191;
}
Here a trick to vertically center content in an html element.
Vertical aligns are always tricky with CSS, but this snippet will allow you to do it easily for a single line of text. Basically we use the line-height property to put an equidistant space at the top and bottom of the text. To make this work, the line height value needs to be the same as the height of the html element containing the text.
Check this
p {
border: red dotted thin;
height: 100px;
text-align: center;
background: black;
color: white;
/* magic line */
line-height: 100px;
}
<p>
One Liner
</p>
div {
position: relative;
border: 1px solid #CACEDB;
width: 500px;
height: 500px;
overflow: hidden;
white-space: nowrap;
border-radius: 5px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<a>
<button type="button" (click)="decrement()" class="btn btn-primary" style="width:50px;height:50px;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</a>
<span style="width:100%">1</span>
<a>
<button type="button" (click)="increment()" class="btn btn-primary" style="width:50px;height:50px;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</a>
</div>
</body>
</html>
check out the snippet
Is this the way you want it?
You can try to style the input tag to set the value at the center by using text-align: center; this worked for me with your code.
div {
position:relative;
width: 160px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:5px;
}
input{
text-align: center;
}
input:focus {outline:none;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div>
<a>
<button type="button" (click)="decrement()" class="btn btn-primary" style="height:100%; border:none;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</a>
<input type="text" style="width:45%;border:none;">
<a>
<button type="button" (click)="increment()" class="btn btn-primary" style="height:100%;float: right; ">
<span class="glyphicon glyphicon-plus"></span>
</button>
</a>
</div>
</body>
</html>
I am using Bootstrap and I know how to make the buttons appear side by side but having issues achieving what I want.
When the buttons are side by side in a 100% width container everything is fine. However, if the second button is removed I would like the first button to fill 100%.
Is there a CSS only approach?
When the buttons are side by side in a 100% width container everything
is fine. However, if one of those buttons are gone I would like the
other button to fill 100%.
Is there a CSS only approach?
Yes. You can easily accomplish this with the flex-grow property of CSS Flexbox.
From MDN:
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up.
Basically, you can tell an element to take up all available width. So if there are two elements, they will share the space equally. If one element is removed, the other expands to fill the width.
Here's all the code you need to make this work:
HTML
<div id="container">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
CSS (relevant parts)
#container {
display: flex;
justify-content: space-around;
width: 100%;
height: 75px;
}
button {
flex-grow: 1; /* this one line tells button to stretch across all available width */
}
DEMO (click buttons for effect): http://jsfiddle.net/rjy6nvj2/1/
Note: Flexbox is supported by all major browsers, except IE 8 & 9.
CSS only solution would be to use only-child pseudo selector
* {
box-sizing: border-box;
}
.container {
width: 340px;
border: 1px solid rgba(0,0,0,0.1);
padding: 5px;
}
.btn {
margin: 0 5px 0 0;
padding: 4px 8px;
background: #5d4ca5;
color: #fff;
text-decoration: none;
text-align: center;
width:157px;
display: inline;
}
.container .btn:only-child {
width: 100%;
}
<div class="container">
<button class="btn">Button One</button>
<button class="btn">Button Two</button>
</div>
<div class="container">
<button class="btn">Button One</button>
</div>
See the working Fiddle here - http://jsfiddle.net/sjpx5c34/1/ (remove the second button and your only button will have 100% width.)
Trick named display:table-cell:
div { width:300px; border:1px solid; display:table; }
div > span { display:table-cell; border:1px solid red; width:50%; }
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>First</span>
</div>
Anthony Russo Hi there.
This code below will show how to first center what and when you need to center.
Because you have a reason why one button will be removed.
I set up a little sample jquery to remove the Second Button when you mouse over it, for this example.
When you mouse over, it also adds the class centerthis to the First Button to center it.
Hope this helps to get you started.
Updated
I see you have added to your post, so I have made added a small change to the my code.
When you have the second button removed, you also want the remaining button width to go 100%.
My code now does this for you too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Remove button and center</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
background-color: darkorange;
}
.block3 {
height: 40px;
width:550px;
padding-top: 3px;
background-color: blueviolet;
}
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.remove-on-hover {
display: none;
}
.change-width {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="col-sm-6 block3 centerthis">
<div class="col-xs-6 centerthis" >
<div type="text" id="firstbutton" class="col-xs-6 btn btn-warning">First Button</div>
<div type="text" id="whenchanged" class="col-xs-6 btn btn-warning">Second Button</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<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>
<script>
jQuery(function () {
var myMenu = $('#whenchanged');
myMenu.mouseenter(function () {
$('#firstbutton').addClass("centerthis change-width");
$("#whenchanged").addClass("remove-on-hover");
});
})
</script>
</body>
</html>
Here is my simple sign up page I tried to make. I need help figuring out how to put home, about, help on the left side of the navbar and sign in on the far right side of the bar. I want them on the same navbar but I couldn't find anything on how to separating them or put them on separate sides of the page.
I'm pretty new to html and css so any other tips that can help improve the quality of my first web page would help alright peaces SO peeps.
<html>
<head>
<title> Sample Sign up App</title>
<script></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="sign up form css.css">
</head>
<body>
<nav class="nav navbar-left">
<div class="nav">
<ul class="nav nav-pills">
<li role="presentation">Home</li>
<li role="presentation">About</li>
<li role="presentation">Help</li>
<li role ="presentation">Sign in</li>
</ul>
</div>
</nav>
<div class ="container">
<div class = "jumbotron">
<h2 id="jumbo-welcome"> Sign up to Sample App today!</h2>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputFile">Username</label>
<input type="text" class="form-control" id="exampleInputFile" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<br>
<button type="submit" class="btn btn-default" id = "submit-button">Sign up</button>
</form>
</div>
</div>
</body>
</html>
CSS for the page
nav {
margin: auto;
width: 1980px;
height:45px;
.border;
.shadow;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav2 li{
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 32px;
height: auto;
border-bottom: 1px solid #888;
}
.jumbotron{
display:block;
position:fixed;
width:40%;
height:66%;
top: 20%;
margin-left:20%;
margin-right:auto;
}
.form-group{
display:block;
margin-left: 15%;
margin-right:15%;
}
.jumbotron #submit-button{
display:block;
margin-left:40%;
margin-right:35%;
}
#jumbo-welcome{
text-align:center;
}
body {
line-height: 1;
background:#F2F2F2;
background-image: url("http://tech-rx.com/wp-content/uploads/2014/05/background.jpg");
}
just add this css to your css code
.nav.nav-pills li:last-child{float:right}
jsfiddle
So I found a cheap way to make the same effect.
<html>
<head>
<title>Sample Home Page</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="home page.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-left">
<ul class="nav navbar-nav" id="navlist">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li id="sign-in-link">Sign in</li>
</ul>
</div>
</nav>
</body>
</html>
assign an id to the sign in link and in css make it go right.
#sign-in-link{
position: absolute;
left: 95%;
margin:auto;
}