I have been learning HTML/CSS/Bootstrap for around a week now and I'm just start a portfolio website as a sort of a test as to what I am able to do so far. Currently, I am having a problem creating the "about me" page responsive due to an image I have on that page.
Link to website is here http://moeminmamdouh.000webhostapp.com/aboutme.html
The desired outcome is to basically have everything centered, however, this is what shows up https://ibb.co/idEPVT
HERE IS THE CODEPEN LINK: https://codepen.io/muchkler/project/editor/AznjbN#
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Portfolio <span class="sr-only">(current)</span></li>
<li class="active">About Me</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<img src="images/rightprof.png" class="rightprof">
<div class="row">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing without a brand, and a brand requires a stable and responsive website. I will be providing designs in both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
<img src="images/behance.png" height="30px" width="30px" class="behance">
</div>
</div>
</body>
</html>
and this is the CSS code:
body{
background: url(images/tom-sini-710353-unsplash.jpg);
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.row{
color: white;
padding-top: 350px;
padding-left: 250px;
width: 900px;
}
.rightprof{
float: right;
padding-top: 250px;
padding-right: 250px;
}
.navbar-default{
background-color: #D91E18 !important;
border-style: none !important;
}
.navbar-brand{
color: white !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #CF000F !important;
}
#media only screen and (max-width: 992px){
.leftside{
padding: 300px;
}
}
#media only screen and (max-width: 992px){
.row{
text-align: center;
padding-right: 110px;
}
.rightprof{
}
}
#media only screen and (max-width: 1042px){
.row{
text-align: center;
}
#media only screen and (max-width: 768px){
.row{
font-size: 10px;
width: auto;
margin-right: 200px;
}
}
any help would be appreciated, thanks!
I suggest removing your about.css file. Learn the grid. Your code was missing '.container' around your '.row', and you were missing the column definition (.col-sm-8, .col-sm-4). Avoid adding CSS widths and floats to your images and content as it will blow up the responsive grid. Instead, add '.img-responsive' class to your images.
<!doctype html>
<html>
<head>
<title> About Me </title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="icon" href="apple-icon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>
<body style="padding-top:70px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<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="index.html">Moemin Mamdouh</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="portfolio.html">Portfolio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="active">
About Me
</li>
<li>
Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>HELLO.</h1>
<h2>I'm Moemin Mamdouh</h2>
<h3>graphic designer/ ui designer/ front-end developer</h3>
<p>I provide entrepeneurs and startups with the kick they need to help start their business. A business is nothing
without a brand, and a brand requires a stable and responsive website. I will be providing designs in
both Adobe Photoshop and Adobe XD as the first step to any projects, afterwards, I move on to coding
the actual website using HTML, CSS, and Bootstrap. </p>
<div class="imgbtns">
<a href="https://www.facebook.com/moemin.mamdouh.3">
<img src="images/facebook.png" height="30px" width="30px" class="facebook">
</a>
<a href="https://www.behance.net/Muchkler">
<img src="images/behance.png" height="30px" width="30px" class="behance"> </a>
</div>
</div>
<div class="col-sm-4">
<img src="images/rightprof.png" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
Related
I am trying to get the background of my block section to encapsulate the image, or be responsive to what is put inside. Honestly, I don't even know what I am trying to ask, I just want the white space to respond to the image size, so I can have a background color/image behind a set block section for my About me. I have tried messing with padding/margin but I cannot seem to get it done correctly. In case the image doesn't load, I have my .html and .css code below
Code
Product
html {
position: relative;
min-height: 100%;
}
body {
background-color: lightskyblue;
}
hr {
border: 0;
clear: both;
display: block;
width: 100%;
background-color: #212529;
height: 1px;
}
.block {
background-color: #fff;
padding: 30px;
margin-bottom: 30px;
}
.photo {
float: left;
height: 320px;
width: 320px;
margin: 0 20px 10px 0;
}
html {
position: relative;
min-height: 100%;
}
main {
margin: 80px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Jake's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="index.html" id="logo">
<h1>Jacob Beeson</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<section class="row">
<div class="col-md-12">
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
</article>
</div>
</section>
</main>
</body>
<footer>
</footer>
</html>
You'll need <div style="clear:both"></div> after <p>I am a ...</p>
Your article block should look like this:
<article class="block">
<h1 class="block-header">About Me</h1>
<hr />
<img src="Headshot.jpg" class="photo">
<p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
<div style="clear:both"></div>
</article>
Also see this fiddle: https://jsfiddle.net/j8Lacshf/
So I've changed the css so that the navigation bar's height matches the logo's height. It works great but when I collapse it to mobile view, there is a line that's bothering me, look at the picture:
This is normal destop version:
This is collapsed mobile view:
This is collapsed mobile view when I press the burger menu. This is the problem, the grey line is out:
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
<!-- bg-warning = Pozadina zuta -->
</body>
</html>
This is my css:
.navbar-default .navbar-nav>li>a {
padding: 21px 15px 21px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 21px;
padding-top: 10px;
padding-bottom: 10px;}
}
#media (max-width: 767px) {
.navbar-default {
line-height: 21px;
padding-top: 0px;
padding-bottom: 11px;}
}
This is the solution:
Open bootstrap.min.css file
Search for this code:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px
}
Add height:150px to the end of the above code.
After adding the code it may like this:
container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
margin-right:-15px;
margin-left:-15px;
height:150px;
}
Then save and check again.
I've created a navbar with a logo but the logo is out of place (see image). I know how to shrink the image so it fits the navbar, but I want to increase the height of the navigation bar so that it matches the logo.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="Slike/logo.png" alt="LogoSlika"/>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav">
<li class="active"> Početna strana </li>
<li> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't have my custom CSS. Do I need to create it ? I'm new to bootstrap.
As simple as that: add this line near including boostrap.min.css
<link rel="stylesheet" href="css/style.css">
Create a new file named style.css in css folder, and add this lines in it.
.navbar-default .navbar-nav>li>a {
padding: 20px 15px 20px 15px;
}
.navbar-default .navbar-brand {
padding-top: 0px;
}
I've tested it and worked for me 100%.
Try it:-
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
This special code works for me with a similar problem with resizing navbar-inverse. I placed the code in my bootstrap custom CSS. You can change the padding to fit hover nav color blocks. For the image issues (site logo) you can add a style="margin-top/bottom, left, right: -12px or 12px" to the
Thanks
I'm not sure why my content is disappearing almost completely, the navbar is still intact, but it won't open, the text in the navbar won't center, the paragraphs aren't responsive, my subscribe button isn't aligned. I'm extremely frustrated and I've been working on this site for a couple of weeks already. Can someone please help me with this. This is a link to the site: http://bit.ly/1kPKVzR Thanks in advance. This is the code for one of the pages in the site...
<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="...">
<title>...</title>
<link rel="icon" href="images/favicon.png" type="image/x-icon" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/customstyle.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
::-moz-selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
::selection {
color:#fff;
background-color:rgba(128, 128, 128, 0.3);
}
.navbar {
color:#000000;
width: 100%;
background-color: rgba(255, 255, 255, 0.0);
border-color: rgba(255, 255, 255, 0.0);
}
.logo{
display:inline-block;
position: absolute;
left:40%;
font-size: 20px;
font: 80px "munich", Sans-serf, Ariel;
margin-top: 60px;
}
.logo a:focus, .logo a:hover{
-webkit-transition:1s;
color:#999999;
text-decoration: none;
}
.logo li a:focus, .logo li a:hover{
-webkit-transition:1s;
color:#000000;
}
#font-face{
font-family:"munich";
src:url("munich.ttf") format("truetype");
}
.starter-template img{
width:450px;
height:450px;
margin: 40px 100px auto;
}
audio{
width:200px;
}
.starter-template .pull-right{
position:absolute;
}
.starter-template img{
width:450px;
height:450px;
margin:20px 100px auto;
}
#albumlinks{
margin-top:440px;
margin-right: -40em;
}
#signup{
position: absolute; right: -5000px;
}
#mc_embed_signup{
background:none; font:14px Helvetica,Arial,sans-serif; margin:500px;padding:0;
}
/**************** #media screen ********************/
#media screen and (min-width: 480px) {
#albumlinks .clear-fix .pull-right{
width:5em;
height:4em;
}
}
.navbar-default{
background-color: rgba(245, 245, 245, 0.1);
}
.navbar-nav{
margin-top: -20px;
}
</style>
</head>
<body>
<div class="logo">
<p>...</p>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Bio
</li>
<li>
Lessons
</li>
<li>
Shows
</li>
<li>
Music
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="clearfix">
<div class="container">
<div class="pull-left">
<img src="../images/piano-1599x1066.jpg"/>
</div>
<p class="lead pull-right ">...</p>
</div>
</div>
<footer class="navbar-fixed-bottom ">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
<p class="pull-right">...</p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
There is an error that says "Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
So you need to change the JQuery that is loaded to a newer version.
Where yours says
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
change it to
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Jquery and Bootstrap .js files are not linked properly.
Once script is working, add css to .navbar-toggle .icon-bar and navbar.
Go to your site and press Ctrl+Shift+I if you are using chrome otherwise right click and choose inspect element. Doing this will bring up the dev tools and most importantly the console.
Looking there we can see that there are errors about JQuery not being loaded.
You can include it in your site by adding the below to the section of your site.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Or alternatively fix the link to your jQuery - http://ericarodriguez.me/jarodkashkin/js/jquery.js
If you click that link you will see that the file does not exist
I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>