I was trying to integrate spring project with admin dashboard template using themeleaf.However when I tried to run the project following issues have been displayed:
An error happened during template parsing (template: "class path resource [templates/index.html]")
Caused by: java.lang.IllegalArgumentException: Attribute name cannot be null or empty
I used themeleaf link for my html and wrote controller to run the app properly.However,despite the changes I made there were no result.
DashBoardController.java
package io.javabrains.Dashboard;
import java.util.Date;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
public class DashboardController {
private static final String appName = "ThymeleafTour";
#GetMapping("/")
public String home(Model model,
#RequestParam(value = "name", required = false,
defaultValue = "Guest") String name) {
model.addAttribute("name", name);
model.addAttribute("title", appName);
return "home";
}
}
build.gradle
plugins {
id 'org.springframework.boot' version '1.5.8.RELEASE'
id 'java'
}
apply plugin: 'io.spring.dependency-management'
group = 'io.javabrains.com'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
configurations {
developmentOnly
runtimeClasspath {
extendsFrom developmentOnly
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-jdbc'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-web-services'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'mysql:mysql-connector-java'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title th:text:="${title}">
<!-- Custom fonts for this template-->
<link href= "#" th:href="#{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
<!-- Custom styles for this template-->
<link href="#" th:href="#{//css/sb-admin-2.min.css}" rel="stylesheet"/>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<h1 th:text="|Hello ${name}!|"></h1>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
With these codes I think project must work well without errors.However the same errors in console keeps displaying
Related
I need to make the name: Data Science in the header and in the footer i need to make
an a Steve Jacob. How can i make this, if i try it looks like wery bad it overlaps the left menu. There is how cite looks like:
There is my index.html:
Again, how can i make some notice in the footer and header which doesn't overlaps the left menu.
imgsize {
width: 30%;
height: 30%;
margin-left: 30%;
display: block;
}
<head>
<title>Главная</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i>
<span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4 pt-5">
<ul class="list-unstyled components mb-5">
<img class="imgsize" src="{% static 'media/logo.png' %}" alt="">
<li class="active">
Главная
</li>
<li>
Востребованность
</li>
<li>
География
</li>
<li>
Навыки
</li>
<li>
Последние вакансии
</li>
</ul>
<div class="footer">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #02</h2>
</div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/main.js"></script>
</body>
<footer>
</footer>
I have a very simple use case. I have downloaded the flask clean blog files from the link : https://startbootstrap.com/template-overviews/clean-blog/ and my intention is to build a blog website.
For starters i am just trying to load the index page using a very simple script :
Test.py :
from flask import Flask,render_template
app = Flask(__name__)
#app.route('/index')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
I have the below module structure :
C:.
│ Test.py
│
├───static
│ └───css
│ bootstrap.min.css
│ clean-blog.min.css
│ font-awesome.min.css
│
└───templates
index.html
Now my index.html file is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<!-- Custom fonts for this template -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 18, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on August 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on July 8, 2018</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2018</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
I am not sure why but this does not seem to work. The navigation bar is not visible .
Even more strangely when i change the lines :
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
to
<link rel="stylesheet" href="{{ url_for('static',filename='bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='clean-blog.min.css') }}" >
everything works normally and i can see the indentation and navigation bar works normally . Ideally it should not work since the css files are inside the /static/css folder and not directly under static.
Can someone please tell me what is the issue here ?
Thanks in advance.
It looks like you have a problem in your path / folder : Flask seems to be serving files from static/css/ instead of static/.
Try playing with those parameters :
app = Flask(__name__, static_url_path='/static',static_folder='static/')
Im trying to use Express to create a API and Angular for front-end of my page but Im unable to correctly route my pages. can somebody see my code and tell me what am I missing or doing wrong ?
The error Im getting is 404 everytime I go try to go to /about it seems that it defaults to index.html
here is my code:
//SERVER.JS
var express = require("express");
var app = express();
var PORT = process.env.PORT || 3001;
var path = require('path');
var router = express.Router();
app.use(express.static(__dirname + '/public'));
app.listen(PORT, function () {
console.log("Server running in PORT " + PORT);
});
//MAIN.JS
var myApp = angular.module('myApp', ['ngRoute']);
console.log("in myApp module");
myApp.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
console.log("in app.config")
$routeProvider
.when('/',{
templateUrl:'../index.html',
})
.when('about',{
templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",
controller:'AboutController'
});
console.log('after provider');
$locationProvider.html5Mode(true);
}]);
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Morand Transportation</title>
<link href="css/reset.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
<script src="./lib/angular/angular.min.js"></script>
<script src="./controllers/main.js"></script>
<script src="./lib/angular/angular-route-min.js"></script>
<script src="./controllers/AboutController.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div class="wrapper">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="top-banner">
<!-- Navigation -->
<div class="container">
<div class="row">
<div class="col-md-12 text-center" id="title">
<span id="title-first">Morand</span> <span id="title-second">Trasnportation</span>
<!--<img src="images/morandLogo.png" class="img-responsive">-->
<hr>
</div>
</div>
</div>
</div>
<div ng-view></div>
<div class="push"></div>
</div><!--End of Wrapper-->
<div id="footer-bar">
<center>footer</center>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="./lib/bootstrap/js/bootstrap.js"></script>
</html>
probably you've made 2 mistakes:
.when('/about',{ //should have a slash
templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",
// this is not a templateUrl
controller:'AboutController'
});
should be like this instead:
template:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",
i also suggest using this awesome ui-router router with angular ;)
I am receiving the error:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. I just want to embed a YouTube video to my site and I've added the tags
<meta http-equiv="X-Frame-Options" content="allow">
But the error is still occurring. Here is the entire code down to where I added the iframe tags.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/favicon.jpg">
<meta charset="utf-8">
<meta http-equiv="X-Frame-Options" content="allow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>DroneDaddy</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css? family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,7 00,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css? family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic, 700italic" rel="stylesheet" type="text/css">
<!-- 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]-->
<body>
<p> </p>
<p> </p>
</body>
</head>
<body>
<div class="brand">Welcome to DroneDaddy</div>
<div class="address-bar">Lawton, Ok</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">DroneDaddy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -- >
<div class="collapse navbar-collapse" id="bs-example-navbar- collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<a href="realestate.html" class="dropdown-toggle" data- toggle="dropdown">services
<b class="caret"> </b>
</a>
<ul class="dropdown-menu">
<li>Real Estate</li>
<li class="divider"></li>
<li>Aerial Inspection</li>
<li class="divider"></li>
<li>Advertisement</li>
<li class="divider"></li>
<li>Aerial Photography</li>
<li class="divider"></li>
<li>Police/Tactical Response </li>
</ul>
</li>
<li>
News
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data- slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data- slide-to="1"></li>
<li data-target="#carousel-example-generic" data- slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="jumbotron col-lg-12">
<h1>Featured Video</h1>
<p>
Hello, Ok.
</p>
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=e2od1FBOCU8">
</iframe>
</div>
To embed with Iframe, you need to use different url for your video - https://www.youtube.com/embed/e2od1FBOCU8
More info on how to embed a YouTube video to your site - http://www.w3schools.com/html/html_youtube.asp
The X-FRAME-OPTIONS is not to be defined by you, but YouTube sends it in video viewing page HTML response header and denies any page from embedding it. When you define the header on your page, it means your page cannot be embedded.
More on the X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack · MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.