I'm working on a site for a client and for some reason Wordpress has stopped loading my extra css files located in side a folder called css which is inside the theme folder.
The code I've used is below
<link href="<?php echo get_template_directory_uri(); ?>/css/ MY CSS FILES " rel="stylesheet" />
The rendered HTML code:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title> My blog</title>
<!-- Bootstrap Core CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/bootstrap.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Custom CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css" rel="stylesheet">
<!-- Fonts from Google -->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Lora:400,400italic' rel='stylesheet' type='text/css'>
<!-- Homepage Slider -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.bxslider.min.js"></script>
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>
<!-- HTML5 Shim and Respond.js 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/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]-->
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Just another WordPress site">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.samuraisound.co.uk\/dev\/alexiafrangakis\/php\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='aps-animate-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/animate.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='aps-frontend-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/frontend.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='normalize-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='html5blank-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css?ver=1.0' media='all' />
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/js/frontend.js?ver=1.3.1'></script>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: 'http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine',
tests: {}
});
</script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" class="home logged-in">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php">I Am Press</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">Home</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="bx-wrapper">
<ul class="bxslider">
<li><div class="blog-featured">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/05/IMG_5939-750x510.png" class="attachment-post-thumbnail wp-post-image" alt="IMG_5939.PNG" /> <div class="featured-square">
<div class="featured-title" rel="bookmark" ><a class="featured-title-class" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">City Guide: Istanbul</a></div>
<div class="featured-excerpt">
Over the May bank holiday I took a quick trip to Istanbul. This beautiful city is soaked in history and culture. With only three days to spend there I didn’t have much time to explore the city, therefore I have picked my favourite parts from my trip. What I did When it comes to being… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">View Article</a> </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<main role="main">
<!-- section -->
<section>
<!-- Latest Section -->
<section id="about" class="latest-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Latest Stories</h1>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_7951" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 21, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">Brown and out</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="DSC_0712" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 18, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">Boom Boom</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_6153.JPG" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 11, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">Camouflage</a>
</div>
</div>
</div>
</section>
<!-- Editors Favorites Section -->
<section id="services" class="editors-section">
<div class="container">
<div class="left-side">
<div class="row">
<div class="col-lg-12">
<h1>Editors Favorites</h1>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_7951" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 21, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/" title="Brown and out">
</div>
<div class="sec-two-excerpt">
A simple neutral outfit can never go wrong. At the moment I am loving brown. I used to always wear shirts so I thought I’d throw on one of my old favourites. Unfortunately it is very big for me nowadays but I just can’t bring myself to get rid of it. The back of the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-150x150.jpg" class="sec-two-img wp-post-image" alt="DSC_0712" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 18, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/" title="Boom Boom">
</div>
<div class="sec-two-excerpt">
I am absolutely obsessed with my new Boom Boom The Label dress. From the fabric to the fit it is perfect. This particular dress is called the Tamera slit back dress. It also comes without the slit at the back, however for ease of movement as it is a bodycon dress I chose to buy the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_6153.JPG" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 11, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/" title="Camouflage">
</div>
<div class="sec-two-excerpt">
Summer is almost here! Finally, I got to wear my new Enza Costa dress. It’s a really simple ribbed jersey grey dress with a curved hem that accentuates curves. I teamed it with my favourite Adidas sliders and a camouflage jacket; after all camouflage is the new black! Jacket – Coming soon Dress Sliders <a href=”http://www.bloglovin.com/blog/13656875/?claim=2n8pkw6dgnk”>Follow… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">View Article</a>
</div>
</div>
</div>
</section>
<!-- /section -->
</main>
<!-- pagination -->
<div class="pagination">
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/'>2</a>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/3/'>3</a>
<span class="page-numbers dots">…</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/20/'>20</a>
<a class="next page-numbers" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/">Next »</a></div>
<!-- /pagination -->
<!-- sidebar -->
<aside class="sidebar" role="complementary">
<!-- search -->
<form class="search" method="get" action="http://www.samuraisound.co.uk/dev/alexiafrangakis/php" role="search">
<input class="search-input" type="search" name="s" placeholder="To search, type and hit enter.">
<button class="search-submit" type="submit" role="button">Search</button>
</form>
<!-- /search -->
<div class="sidebar-widget">
</div>
<div class="sidebar-widget">
</div>
</aside>
<!-- /sidebar -->
<script type='text/javascript'>
/* <![CDATA[ */
var countVars = {"disqusShortname":"alexiafrangakis"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.2.2'></script>
<!-- Footer -->
<section id="footer" class="footer">
<div class="container">
<div class="footer-widgets">
<div id="footer-widget-one">
</div>
<div id="footer-widget-two">
</div>
<div id="footer-widget-three">
</div>
<div id="footer-widget-four">
</div>
</div>
<hr>
<div id="footer-credits">
<div class="credits-left">© I Am Press 2015 </div>
<div class="credits-right">Beautifully hand-coded by Darius Carter</div>
</div>
</div>
</section>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.easing.min.js"></script>
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scrolling-nav.js"></script>
</body>
</html>
<!-- Dynamic page generated in 0.350 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2015-07-09 20:32:03 -->
Try as follows
href="<?php echo get_template_directory_uri().'/css/ MY CSS FILES' ?> "
It's better to use wp_enqueue_scripts function for adding custom css/js files because it loads file before custom files added in header/footer.
function add_theme_css() {
wp_enqueue_style( 'cssfile', get_template_directory_uri() . '/css/file.css');
}
add_action( 'wp_enqueue_scripts', 'add_theme_css' );
Related
I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full code
<!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><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/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]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>
Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
Having problem with one of my development work that from time to time the page is rendering as text. Look at the http header and I cannot see anything wrong. Can someone give me a helping eye.
Thanks
0000
HTTP/1.1 200 OK
Date: Fri, 09 Dec 2016 13:15:49 GMT
Content-Length: 5621
Content-Type: text/html; charset=ISO-8859-1
Content-Language: en
X-Powered-By: Servlet/2.5 JSP/2.1
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RunDetails</title>
<script type="text/javascript" src="/environment/resources/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/environment/resources/dev/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-animate.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="/environment/resources/js/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="/environment/resources/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/tooltip.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.tpl.js"></script>
<script type="text/javascript" src="/environment/resources/js/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/css/em.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<!-- jQuery/Bootstrap JS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="envmon-header">
<div class="row">
<div class="col-md-1" id="logo">
<img src="/environment/resources/dev/img/flight.jpg">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6" id="headertitle">
<!-- <h1>Environment Monitoring</h1> -->
<h1>Environment Monitoring</h1>
</div>
</div>
<ul class="nav nav-pills">
<li><h2>Run A REPORT</h2></li>
<li class="dropdown" >
<h2 class="dropdown-toggle" data-toggle="dropdown">CONFIGURATION <b class="caret"></b></h2>
<ul class="dropdown-menu1" role="menu">
<li>Component Search</li>
<li>Component Group Search</li>
<li>Time Period Search</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="envmon-body" >
<div id="angularTestPage" class="theme-showcase row" ng-controller="RunDetailsPageController">
<!-- Error container. This should be populate with right error message on execution. -->
<div ng-cloak class="row">
<div ng-cloak class="alert-danger" ng-repeat="error in headerErrors">
{{error.message}}
</div>
<div ng-cloak class="alert-warning" ng-repeat="warning in headerWarnings">
{{warning.message}}
</div>
<div ng-cloak class="alert-info" ng-repeat="info in headerInfos">
{{info.message}}
</div>
<div ng-cloak class="global-error alert alert-success header-errors" ng-repeat="success in headerSuccesses">
{{success.message}}
</div>
</div>
<!-- vvvvvvvvvvvvvvvvvvvvvvv Actual Content Start Here vvvvvvvvvvvvvvvvvvvvvvv -->
<div id="content-title" class="row">
<div class="col-md-6 pageTitle align-left">Test Run Details</div>
<div class="col-md-6" >
<input type="submit" ng-click="exportButtonClicked()" id="btnExport" class="styled-button pull-right" value="EXPORT" />
</div>
</div>
<div id="run-detailsid" class="row">
<div id="" name="" class="row table-header-row" >
<div class="col-md-1">Component</div>
<div class="col-md-1">Status</div>
<div class="col-md-4">Test Name</div>
<div class="col-md-2">Service</div>
<div class="col-md-2">Operation</div>
<div class="col-md-2">Created Date</div>
</div>
<div id="" name="" class="row table-detail-row-wrap" ng-repeat="runDetail in runDetails">
<div class="col-md-1 table-cell centered">{{runDetail.componentName}}</div>
<div class="col-md-1 table-cell centered">
<div ng-show="runDetail.testLogId != ''">
<a href="" ng-click="runSelectedTestId(runDetail.testLogId);">
<img ng-src="{{runDetail.status == 2 ? redCircleImageLocation : greenCircleImageLocation}}" border="0" >
</a>
</div>
</div>
<div class="col-md-4 ">{{runDetail.testName}}</div>
<div class="col-md-2 ">{{runDetail.service}}</div>
<div class="col-md-2 ">{{runDetail.operation}}</div>
<div class="col-md-2 ">{{runDetail.createdDate}}</div>
</div>
</div>
<div> </div>
<div class="col-md-12 centered">runId = {{runDetails[0].runId}} </div>
</div>
<script type="text/javascript" src="/environment/resources/js/controllers/rundetails.js"></script>
</div>
<div id="envmon-footer">
<div class="row">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
So the problem I am having is the webpage is not loading the background image
Following image address does not seem to load so page background stay's pitch black and nothing can be read because of it.
Edit:
Here is my full css code.
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415
background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
}
this is what my index.html looks like.
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coming soon</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://example.com/new/css/default.css">
<link rel="stylesheet" href="http://example.com/new/css/layout.css">
<link rel="stylesheet" href="http://example.com/new/css/media-queries.css">
<!-- Script
================================================== -->
<script src="http://example.com/new/js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="example.com/new/favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current">Home</li>
<li>About</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
Lost your password?
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<div class="action">
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
</div>
<div class="columns">
</div>
<div class="columns end">
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2016 Coming soon</li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
<script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://example.com/new/js/gmaps.js"></script>
<script src="http://example.com/new/js/waypoints.js"></script>
<script src="http://example.com/new/js/jquery.countdown.js"></script>
<script src="http://example.com/new/js/jquery.placeholder.js"></script>
<script src="http://example.com/new/js/backstretch.js"></script>
<script src="http://example.com/new/js/init.js"></script>
</body>
</html>
Change your css to this, because your css is invalid (when you define background-image you can't include the no-repeat. either use background: url() no-repeat; or add background-repeat: no-repeat;):
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
background-size: cover;
}
Also, not necessary to include the quotes in the url syntax. I prefer to leave it out. More information on this in this post: Is quoting the value of url() really necessary?
Not sure if you are allowed to link your website but if it's allowed.
So I can hover all links in the navbar but I can't click them and the pictures of S's is hoverable but not clickable, what am I doing wrong?
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Nickeb0i Scripts - Landing Page</title>
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1"> <span class="icon icon-home"></span> <span class="text">HOME</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="/services"> <span class="icon icon-user"></span> <span class="text">SERVICES</span></a></li>
<li data-slide="3" class="col-12 col-sm-2"><a id="menu-link-3" href="/scripts"> <span class="icon icon-briefcase"></span> <span class="text">SCRIPTS</span></a></li></ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div id="home-row-1" class="row clearfix">
<div class="col-12">
<h1 class="font-semibold">NICKEB0I <span class="font-thin">SCRIPTS</span></h1>
<br>
<br>
</div><!-- /col-12 -->
</div><!-- /row -->
<div id="home-row-2" class="row clearfix">
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="4"><img src="images/s03.png"></div><span>SCRIPTS</span></div>
<div class="col-12 col-sm-4"><div class="" data-slide="3"></div></div>
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="5"><img src="images/s03.png"></div><span>SERVICES</span></div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide1 -->
<footer>
<div class="container">
<p><font color="white">Copyright © Nickeb0i 2016</font><p>
</div>
</footer>
</body>
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
</html>
You have written href = "/services", add a forward-slash and write href = "/services/". This should work.
I'm not entirely sure that this is related to it but if I click a button my console immediately shows an error:
script.js:187 Uncaught TypeError: Cannot read property 'top' of undefined
You're getting this error
Uncaught TypeError: Cannot read property 'top' of undefined
Because you're trying to select a DOM object that doesn't exist:
var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;
Adding the class slide to your elements with data-slide attributes stops the error.
But you should ask yourself, do you really need javascript like this for navigation and hover effects?
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.