We Keep Coding

How to slide in from right with jQuery, with transitions?

I have a code that when you click on a button, a div appears. But the thing is, my div slides in from the top, and I want to have it when someone clicks on the button, it slides in from the right with transitions. But I don't know how to change my current code to make that work. I know I can't switch from display: none to visibility and opacity to add CSS animations, right? So what can I do to make this as smooth as possible? Can someone please take a look and help me out?
Here's my code:
$(function() {
$("a#toggle").click(function() {
$("#slidein").slideToggle();
return false;
});
});
#slidein {
display: none;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
position: fixed;
right: 0;
top: 0;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

You can use CSS transition to achieve your goal. Initially, the slide in panel #slidein will sit outside of the right edge of your screen. A CSS class in will be toggled when you click a#toggle. Clicking on button.close will remove the class in from #slidein that will slide the panel out.
$(function() {
$("a#toggle").click(function() {
$("#slidein").toggleClass("in");
return false;
});
$("button.close").click(function() {
$("#slidein").removeClass("in");
return false;
});
});
#slidein {
position: fixed;
top: 0;
width: 100%; /*modify this value to fit your needs*/
right: -100%; /*modify this value to fit your needs*/
/*css transition*/
-webkit-transition: right 500ms ease-out;
-moz-transition: right 500ms ease-out;
-o-transition: right 500ms ease-out;
transition: right 500ms ease-out;
}
#slidein.in {
right: 0;
}
.card {
background-color: #bdbdbd;
text-transform: uppercase;
height: 100%;
}
.close {
position: absolute;
right: 0;
background: #fff;
opacity: 1;
color: #29292b;
font-size: 10px;
text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="slidein">
<div class="card rounded-0 border-0">
<div class="card-header border-0 p-0">
<button type="button" class="close p-2">
<span aria-hidden="true">x close</span>
</button>
<img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
</div>
<!-- /.card-header -->
<div class="card-block py-4 px-3">
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT
<span>TEXT</span>
<span>TEXT</span>
</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<h4 class="card-title mb-2">TEXT</h4>
<p class="card-text">TEXT</p>
<div class="form-group">
<textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
</div>
</div>
<!-- /.card-block -->
</div>
</div>
Contact

Display bootstrap wells on left and right side of the page

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen

I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>

Fixed Footer color is not changing?

I am a beginner i am trying to make a one page simple html website.i want to change color of navbar to saffron(#FF9933) and footer to green but i am facing problem so whenever i change navbar color to some color the same color applies to the footer also any idea? here is the code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Netzach’s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/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>
<style> body { font: 400 15px/1.8 Lato, sans-serif; color: ##ff7f00; } h3, h4 { margin: 10px 0 30px 0; letter-spacing: 10px; font-size: 20px; color: #228b22; }
.left{text-align: left;}
.container { padding: 80px 120px; }
.person { border: 10px solid transparent; margin-bottom: 25px; width: 80%; height: 80%; opacity: 0.7; }
.person:hover { border-color: #228b22; }
.carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; }
.carousel-caption h3 { color: #ff7f00!important; } #media (max-width: 600px) { .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ } }
.bg-1 { background: #2d2d30; color: #228b22; } .bg-1 h3 {color: #ff7f00;} .bg-1 p {font-style: italic;} .list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }
.list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail p { margin-top: 15px; color: #555; }
.btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; }
.btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; }
.modal-header, h4, .close { background-color: #228b22; color: #fff !important; text-align: center; font-size: 30px; } .modal-header, .modal-body { padding: 40px 50px; }
.nav-tabs li a { color: #ff7f00; } #googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; background-color: #FF9933; border: 0; font-size: 11px !important; letter-spacing: 4px; opacity: 0.9; }
.navbar li a, .navbar .navbar-brand { color: #ff7f00 !important; } .navbar-nav li a:hover { color: #fff !important; }
.navbar-nav li.active a { color: #fff !important; background-color: #ff7f00 !important; } .navbar-default .navbar-toggle { border-color: transparent; }
.open .dropdown-toggle { color: #fff; background-color: #ff7f00 !important; } .dropdown-menu li a { color: #000 !important; }
.dropdown-menu li a:hover { background-color: red !important; }
footer { color: black; padding: 32px; }
footer a { color: #228b22; }
footer a:hover { color: #777; text-decoration: none; }
.form-control { border-radius: 0; } textarea { resize: none; }
td{border-style: groove;}
body{
background-color: white;
}
</style>
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<!--script type="text/javascript" src="engine0/jquery.js"></script--> <!-- End WOWSlider.com HEAD section -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"><img src="" alt="Logo"></img></a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#Services">
SERVICES <!--<span class="caret"></span>-->
</a>
<!--<ul class="dropdown-menu"> <li>Electoral</li> <li>Media P.R</li> <li>Legal Consultancy</li> <li>Training and Development</li> <li>Advertisment</li> </ul> -->
<li>ASSIGNMENTS</li>
<li>CAREER</li>
<li>CONTACT</li>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
<!--
<div id="wowslider-container0"> <div class="ws_images"><ul>
<li><img src="data0/images/slide1.jpg" alt="SLIDE" title="SLIDE" id="wows0_0"/></li>
<li><img src="data0/images/slide2.png" alt="http://wowslider.com/" title="SLIDE" id="wows0_1"/></li>
<li><img src="data0/images/slide3.jpg" alt="slide" title="slide" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/slide1.jpg" alt="SLIDE"/>1</span>
<span><img src="data0/tooltips/slide2.png" alt="SLIDE"/>2</span>
<span><img src="data0/tooltips/slide3.jpg" alt="slide"/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">responsive slider by WOWSlider.com v8.7</div> <div class="ws_shadow"></div> </div> --> <script type="text/javascript" src="engine0/wowslider.js"></script> <script type="text/javascript" src="engine0/script.js"></script> <!-- End WOWSlider.com BODY section --> <!-- Container (The Band Section) -->
<div id="band" class="container text-center">
<h3>About Us</h3>
<p class="left">SOME TEXT
</p>
<br> <!-- Modal -->
<div class="modal fade" id="myModal" 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><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label> <input type="number" class="form-control" id="psw" placeholder="How many?"> </div>
<div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label> <input type="text" class="form-control" id="usrname" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-block">Pay <span class="glyphicon glyphicon-ok"></span> </button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>
<p>Need help?</p>
</div>
</div>
</div>
</div>
</div>
<div id="Services" class="container text-center">
<h3>Services</h3>
<div class="row">
<p>
<div class="col-lg-12 col-md-12 col-sm-12">
<h3>Psephological Consultancy:</h3>
We provide solutions at every level at your doorstep. Some of them are:
<table style="border-style: dotted;" class="col-lg-12 col-md-12 col-sm-12">
<tr>
<td>Political surveys</td>
<td>Constituency profiling</td>
</tr>
<tr>
<td>Candidate positioning</td>
<td>Political party position</td>
</tr>
<tr>
<td>Opinion polls</td>
<td>Pre -Poll</td>
</tr>
<tr>
<td>Exit Poll</td>
<td>Tracking Poll</td>
</tr>
<tr>
<td>Election campaign management</td>
<td>Increase voter awareness and support</td>
</tr>
<tr>
<td>Public opinion creation</td>
<td>Bring the voter to booth</td>
</tr>
<tr>
<td>Campaign support </td>
<td>Media and social media support</td>
</tr>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Market Research</h3>
The skills required for stakeholder research are easily transferable towards addressing client requirements such as market assessment, preparation of concept notes, demand quantification, customer feedback and brand image building. The services are not limited by geography or the industry type. Given our experience in various elections and ready access to top consultants within India and abroad. We will be glad to offer you customized solutions for your market research.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<br/>
<br/>
<p>
<h3>Media Consultancy</h3>
From providing content outsourcing to training and set up of niche programming streams such as election programming to full fledged turnkey solutions tailored for print and electronic media. Netzach’s is your one stop shop for your consultancy needs. Not only have we successfully operated in diverse media environments such as News Agency, TV Channels, Newspapers, Magazines and Internet media, we have also delivered value to our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Socio-Economic Research</h3>
Netzach’s is proud to have partnered with academic institutions, NGOs, Independent Researchers and various Industry bodies in production of socio-economic data and research reports. Furthering the frontiers of human well being was one of the founding motives of our organization and we are proud to have done justice to the same. We encourage individuals and bodies engaged in socio-economic research to work with us. our clients cutting across borders. We are adept at providing localized and customized consultancy suited to the milieu in which our clients operate.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Qualitative Consultancy</h3>
Ever felt the need to talk to someone who understands the local polity and culture beyond what the numbers convey? Our team of highly trained analysts and consultants who have years of experience under their belt would be glad to offer you some advice. Not only do we have access to best political analysts in the business we also have a enviable network of consultants who are ready to provide niche consultancy services to our clients.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Public Private Partnerships</h3>
Our experience with democratic processes and formidable skill set in determining policy direction empower us to be an active partner of the host government in public-private partnership projects. Sectors such as Education, Resource mapping, Governance Surveys, Independent Evaluation and Policy assessment are some of the streams that have witnessed active Netzach’s participation or demonstrated deploy-able capability to execute the projects satisfactorily.
</p>
</div>
</div>
</div>
<div id="Assignments" class="container text-center">
<h3>Assignments</h3>
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
<h3>Recent Assignments</h3>
<p></p>
</div>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 text-center">
<h3>Ongoing project</h3>
<p class="center"></p>
</div>
</div>
<div id="Career" class="container text-center">
<h3>Career</h3>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Interns</h3>
Netzach’s offers college and university students a snapshot of professional life that awaits them via a limited number of internships. The selection criteria for the internships are very
stringent and we advise the students to generate a very high quality cover letter and a CV that delineates their extra-curricular and curricular activities to better help us evaluate their merits. Email us to: netzachsrnd#outlook.com
Please write "Internship" in the subject line of the mail.
We offer Opportunities for professional growth and development
Platform to express freely and multi tasking
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 left">
<p>
<h3>Competitive package</h3>
Flexibility and learning while working experience.
</p>
</div>
</p>
<br>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h3 class="text-center">Contact</h3>
<div class="row">
&nbsp &nbsp &nbspPlease enter your details in the form below or email to netzachsrnd#outlook.com. We will contact you shortly.
<br/>
<br/>
<div class="col-md-4">
<p>Drop a Message here</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Mumbai, India</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: 000000000</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: netzachsrnd#outlook.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div>
<div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group"> <button class="btn pull-right" type="submit">Send</button> </div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<!--Fixed Footer-->
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<p> © 2016 Netzach`s.</p>
</div>
</div>
<br><br> </footer>
<script>$(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); });})</script>
</body>
</html>

There is an issue in your css.
Replace
.navbar-inverse {
background-color: #222;
border-color: #080808; }
with
.navbar.navbar-inverse {
background-color: #222;
border-color: #080808; }

your footer also has the navbar class;
so you have to define it like that:
footer .navbar {
background-color: green;
}

How can I put these buttons side by side

How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse 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="#main-nav">
<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 topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!