i've a bug when choosing the tablet layout.
It works like a charm on smartphones and desktop but my buttons aren't centered anymore on tablet.
Here's my code :
<body>
<header class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<h1 class="text-center">La maison de l'architecte</h1>
</header>
<nav class="">
<div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<img src="assets/img/city1.jpg" alt="Nos réalisations">
</div>
<div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side1.jpg" alt="Nos projets">
</div>
<div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="assets/img/side2.jpg" alt="Notre ambition">
</div>
</nav>
<footer class="text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</body>
Just add the row class to the nav <nav class="row">
see fiddle https://jsfiddle.net/g74Ep/472/
Related
I have a Drupal 8 TWIG file with this code :
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i> {{ product.flag_like_product }}
</div>
Is it possible to exclude the following code :
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
Here is the rendering of the code :
<div class="row p-0 m-0">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i>
<div class="bs-field-like-link">
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
</div>
<span class="bs-field-like-count">
1
</span>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-comment fa-lg"></i> 0
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="fas fa-share-alt fa-lg"></i> 0
</div>
</div>
I am developing a web application and would like my EntreCadastre-se|Carrinho menu to be next to the text field, but it is getting underneath
<div class="row">
<div class="col-6 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal">
</div>
<div class="col-6 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-6 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
What you are doing wrong here is your math. Like #efkin said you have only 12 columns. But you have defined three divs with col-6. That means 3*6 = 18.
When you want 3 columns with equal size on one row you have to use col-4 for each, because 3*4 = 12.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4 col-md-4 col-xs-4">
<img src="imagens/eccomerce.JPG" alt="principal" id="imagem_principal" >
</div>
<div class="col-4 col-md-4">
<div class="busca"><input type="text" id="campo_busca" placeholder="O que você procura?"><button type="submit" onclick="" class="buscar_produto "><i class="fa fa-search" action="" ></i></button> </div>
</div>
<div class="col-4 col-md-4">
<ul class="menu_2">
<div class="btn-group" role="group">
<div class="btn-group" role="group">
Entre/Cadastre-se <span class="caret"></span>
</div>
<button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
</div>
</ul>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
<br><br><br>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>
</div>
</div>
</div>
</div>
It looks like Image 1
How can I make it look like image 2 but with 2 columns, because mine is all stuck with eachother:
First, you can't have more than 12 col by row, so your code is wrong.
Second, please, don't use the "I'll put every class and it'll work" as suggested by my fellow, Bootstrap work on a cascade way, you just have to set on the "until the smallest screen" you want.
If you want 2 col even in xs-, then just use the col-xs-6, no need to set the sm- / md- / lg-.
And last, I don't really understand what you want, this ?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6"><i class="fa fa-2x" aria-hidden="true"></i><br></div>
</div>
</div>
</div>
</div>
In bootstrap, .col-md- class is used for medium screens, .col-xs- means extra small and col-sm for small screens
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later
<br>
<i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?
<br>
<i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!
</div>
</div>
</div>
</div>
</div>
I am using bootstrap list-group to display links to itunes, amazon and google play. Each link is its own list-group-item. I would like for all of these items to be centered inline with one another. How do I do this?
<!-- Download badges -->
<div class="container-fluid">
<div class="row">
<div class="list-group">
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/cplq6c" class="list-group-item" target="_blank">
<i class="fa fa-apple fa-2x" aria-hidden="true"></i>itunes</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/1qcfl6" class="list-group-item" target="_blank">
<i class="fa fa-amazon fa-2x" aria-hidden="true"></i>amazon</a>
</div>
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2">
<a href="http://hyperurl.co/mb95g4" class="list-group-item" target="_blank">
<i class="fa fa-google fa-2x" aria-hidden="true"></i>google play</a>
</div>
</div>
</div>
</div>
To be more clear, I would like to have the list-group centered on the page.
Use the col-lg-offset-* classes. Demo. You need it on your first column.
<div class="col-xs-4 col-sm-4 col-med-4 col-lg-2 col-lg-offset-3">
...
</div>
Change
<div class="container-fluid">
to
<div class="container">
Please take look at my portfolio site
the toggle hamburger button for navigation for smaller screen sizes doesn't work i.e nothing happens and the links don't show up when I click on it.
the images and boxes for the portfolio apps showcased becomes too small for smaller screen sizes even though I used col-sm-12, dunno why this is happening?
I have noticed that there is a horizontal bar too for small screen sizes, which shouldn't be there. It seems that it's the portfolio heading and the contact me heading causing this. could you tell me how to fix this?
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<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="#">Faraz Ahmed</a>
</div>
<!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- div collapse ends -->
</div>
<!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i>
<hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive.
Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i>
<hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg">
</a>
<p>This is the random quotes generator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg">
</a>
<p>This is the pomodoro timer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg">
</a>
<p>This is the javascript calculator</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg">
</a>
<p>Carousel Experiment with in psd to html site</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg">
</a>
<p>My Portfolio site showcasing projects & experiments</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg">
</a>
<p>Experimenting with overlay and pop-up boxes</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg">
</a>
<p>My Weather app</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg">
</a>
<p>Wikipedia Viewer</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
<a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy">
<img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg">
</a>
<p>Twitch Tv Streamer</p>
</div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed # 2016</p>
</div>
Problem
you are missing bootstrap.js
Explanation
Boostrap navbar requires JavaScript plugin to work, and you are missing it. You can see in Boostrap Docs
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the
navbar collapses, it will be impossible to expand the navbar and view
the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in
your version of Bootstrap.
Working Snippet
body{
font-size:14px;
}
.container-fluid{
max-width:1200px;
}
.hoverme{
height:400px;
margin-bottom:20px;
overflow :hidden;
max-width:340px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar Begins -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- navbar header begins -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<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="#">Faraz Ahmed</a>
</div> <!-- navbar header ends -->
<!-- div collapse begins -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!-- div collapse ends -->
</div><!-- container-fluid ends -->
</nav>
<!--Navbar ends -->
<div id="aboutme" class="about container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-6">
<img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
<h1>Faraz Ahmed</h1>
<hr><i class="fa fa-star"></i><hr>
<p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive. Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
</div>
</div>
</div>
<div id="portfolioz" class="portfolio container-fluid">
<div class="row">
<div class="col-md-12 col-md-10 col-sm-12">
<h1>Portfolio</h1>
<hr><i class="fa fa-star"></i><hr>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg"></a>
<p> This is the random quotes generator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg"></a>
<p> This is the pomodoro timer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"> <a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg"></a>
<p> This is the javascript calculator</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg"></a>
<p>Carousel Experiment with in psd to html site</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg"></a>
<p>My Portfolio site showcasing projects & experiments</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg"></a>
<p>Experimenting with overlay and pop-up boxes</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg"></a>
<p>My Weather app </p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg"></a>
<p>Wikipedia Viewer</p></div>
<div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg"></a>
<p>Twitch Tv Streamer</p></div>
</div>
</div>
<div id="contactme" class="contact container-fluid">
<div class="row">
<div class="col-md-12">
<h2> Connect with me:</h2>
<a href="http://www.twitter.com/faraz">
<button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
</a>
<a href="http://www.github.com/silentarrowz">
<button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
</a>
<a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
<button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
</a>
<a href="http://www.freecodecamp.com/silentarrowz">
<button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright Reserved By Faraz Ahmed # 2016</p>
</div