I'm using the page-header class to centre the main content of my page. This creates some empty column space on either sides of page-header, and I'd like to utilize that space (possibly to add AdSense banners).
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left">
<span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right">
<span>Right Dong</span>
</div>
</div>
</div>
</body>
</html>
I do not see Left Ding or Right Dong anywhere on the page. Here is the rendered html: https://jsfiddle.net/bgmjs3qf/
What is the correct way to utilize the left and right column spaces?
You have to add padding to the top of your page since you have a fixed navbar.
See example and Docs.
body {
padding-top: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left"> <span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right"> <span>Right Dong</span>
</div>
</div>
</div>
Related
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
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">
<title>Homepage</title>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
I think I looked everywhere and tried everything.
I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other.
HTML code:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
Any reason why? Thanks in advance.
The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.
Please make sure that you have the following included in the section of your document.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen example: https://codepen.io/CapySloth/pen/gRGNxa
Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!
<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="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<img src="img/instagram.png"/>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<img src="img/facebook.png"/>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png"/>
</div>
</div>
</div>
</div>
1st:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
Should be
<img src="img/instagram.png">
For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))
3rd: could be your reference not setup properly. try those:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<img src="img/instagram.png">
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<img src="img/facebook.png">
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png">
</div>
</div>
</div>
</div>
I can't figure out what is the problem with my code. I'm very new in bootstrap my problem is kinda trivial. One of my field is out of position. I have tried a different route by making only one row and instead of increasing the div sizes I reduced them, but it had the exact same problem. (Run the code in full screen mode).
Please if you can help me out!
.row {
background-color: yellow;
}
.col-sm-3, .col-sm-6 {
border:solid 2px black;
}
div {
height:200px;
}
.two-div {
height:400px;
}
.three-div {
height:600px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div pull-left">Works</div>
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
With some nesting and pull-right on the appropriate columns you can reverse the float:left and make it work (albeit a hack!)...
http://www.codeply.com/go/rgHEL6DW12
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4 three-div">works</div>
<div class="col-sm-8">works</div>
<div class="col-sm-4 three-div pull-right">works</div>
<div class="col-sm-4 two-div pull-right">works</div>
<div class="col-sm-8 pull-right">
;-)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 two-div">works</div>
<div class="col-sm-12 two-div">works</div>
</div>
</div>
</div>
</div>
Think about it like this...
http://www.codeply.com/go/rgHEL6DW12
Your unhappy smiley box is off because your setting different heights for the containers. I altered your code to explain how you work with BS grid system. See comments.
.row {
background-color: yellow;
}
.col-sm-3,.col-sm-6 {
border:solid 2px black;
}
div { height:200px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div">Works</div> <!-- no need for pulling left. BS does that already -->
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div">Works</div> <!-- no need for pulling right -->
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-9">Works</div> <!-- use -offset-X to move your divs horizontally along the grid -->
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I'm in the process of learning bootstrap and am struggling very hard. I know that the default row height in bootstrap is whatever height will be able to contain a child element (i.e. a column). However, the default height of a column is to take up the minimum amount of space.
So my question: How do I force the height of a column to take up the height of the row? Let's say I have two columns in a row. The height of one column is greater than the other due to the contents of a column being more. How do I force the sibling column to be the same height?
I feel like I've tried everything and am having no luck. I've tried using the flex properties, the table properties, but nothing is working.
Also, is it good practice for me to be modifying the css of bootstrap classes? Couldn't this possibly break the entire framework?
TLDR: What is the best method for declaring div heights in bootstrap?
As an example, how would I get both of the 'hello there' divs to occupy the same height in the same row?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;} .col-md-9{height: 100%}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row">
<div class="col-md-3">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="col-md-9">
<div class="alert alert-success" role="alert">
<h3> Hello there!</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
Hi there!
</div>
</div>
</div>
</body>
</html>
Edit: Attempting with .row-eq-height. Still no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffeedev Data Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style> body { padding-top: 70px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Plot</li>
</ul>
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid ">
<div class="row row-eq-height">
<div class="col-md-3" style="background-color: red">
Hello!
<br>
<br>
<br>
</div>
<div class="col-md-9" style="background-color: red">
Hello!
</div>
</div>
</div>
</body>
</html>
if you just wand to control the height you can specify the height in your own css like;
#myCustomDivId{
height: 10em;
}
em will be scale to the screen size. just playing about with the number until it looks the way you want.
I have following HTML code with bootstrap with a simple login. I want to make a box behind the login form and to be something like this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HOVER CSS -->
<link href="css/hover-min.css" rel="stylesheet" media="all">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
<!-- LOGIN BOX -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<div class="panel panel-default hvr-glow">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input name="username" type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input name="password" type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm hvr-grow-shadow">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END LOGIN BOX -->
<!-- HEADER -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
<!-- END HEADER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And live at
Live here
I searched a lot for this border or box but i didnt find anything at all at bootstrap site.
Can anyone guide me of how to make this border and put the login box in the middle of the box and i will play with the margin top.
Thanks a lot for your time!
Wrap it in a container element. A "Bootstrap" way to do this would be something along the lines of nesting columns.
<div class="container">
<div class="row"><!-- new -->
<div class="col-md-12 form-container"><!-- new -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default hvr-glow">
<!-- rest of your markup -->
</div>
</div>
</div>
</div><!-- new -->
</div><!-- new -->
</div>
Style .form-container as needed; i.e. background-color: white; border-radius: 10px;.
I see you have a custom CSS selector on your navbar's .container element of .container-nav that limits the width of the navbar. You'd have to apply something similar if you wanted what I have above to only be as wide as the navbar.
It looks like this project is a work-in-progress as I foresee issues with your logo and the layout you currently have. So I think any answer you get won't be exactly on point.
Hope this gets you pointed in the right direction though.