<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stadtfestlauf - Start</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.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]-->
</head>
<body id="avcontent">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<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>
<a class="navbar-brand" href="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb
<li>Anmelden
<li>Sponsoren
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
<div class="container" id="pcontent">
<div class="col-md-7">
<div class="jumbotron">
<h1>Hallo</h1>
<p>sample text</p>
<div class="wrapper">
<p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
</div>
</div>
</div>
<div class="col-md-5" id="imgslide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.
You need to change the data-targetof your button to the ID of your navbar-collapseelement.
Furthermore your html is missing some closing <li>'s.
Change your nav code to this:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb</li>
<li>Anmelden</li>
<li>Sponsoren</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
For my the solution was to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure that you put jQuery script before Bootscript link in your header part i.e. (in the following order)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2023 Solution from Bootstrap API docs
Assuming no syntax errors inside your nav tag...
Put this code in the head of your HTML file. It "plugs in" jQuery & Popper, which Bootstrap depends on in order to make the "mobile" navbar work.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Reference
Related
I'm a beginner web developper, and I'm working on a homepage. Yet I'm stuck: for some reasons, my divs just won't stack on top of each other like they should (at least I think so), the blue one keep appearing in the center of the page, no matter what I do. I tried a whole lot of things, and nothing solved it.
Help!
Best Regards,
-Solar Palms
PS: There's my code ...
body{
background:url(trees.jpg);
background-size:cover;
background-postion: center;
}
h1{
color: white;
}
main{
text-align: center;
padding-top: 15%;
}
.lol{
width: 100%;
height: 100%;
clear: left;
}
<!DOCTYPE html>
<html>
<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>Home</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">
<link rel="stylesheet" type='text/css' href="Home.css">
<!-- The JQuery Link -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- 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>
<!-- HUGE NAVBAR -->
<div class='lol'>
<header id="header" style="position:sticky; top:0;">
<div class='container'>
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">GREEN Seed</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-left:15%;">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
<li>Our Projects</li>
<li>Rules</li>
<li>About Us</li>
</ul>
<form class="navbar-form navbar-left" style="margin-left:20%">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</div>
<main>
<h1>Are you ready to help to save Our planet!</h1>
<button class="btn btn-default btn-lg">Take actions!</button>
</main>
</div>
<div class='lol' style='background-color: blue; height:100px;'>
</div>
</body>
</html>
enter image description hereEverytime I add a image with img tag to the html file the navbar stops working? Anyone have an idea... thank you in advance. I thought at first it had something to do with the img-responsive class but it seems not to be the issue.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>
About
</title>
<meta name="description" content="is applying to be a full stack developer student .">
<!-- 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>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="css.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav" aria-expanded="false" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li class="active">ABOUT <span class="sr-only">(current)</span></li>
<li>RESUME</li>
<li>PROJECTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">
<p class="intro">Hi, my name is<br> Angel<br>and I am a</p>
<div class="textShow">
<div class="textSlider fade">
<p><strong>DEVELOPER</strong></p>
</div>
<div class="textSlider fade">
<p><strong>M.B.A.</strong></p>
</div>
<div class="textSlider fade">
<p><strong>VETERAN</strong></p>
</div>
<div class="textSlider fade">
<p><strong>FOODIE</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 middleOne">
<p class="groundUp">Creating and building from the ground up</p>
//this breaks navbar<img class=" img-responsive beet1" src="Graphics/beetv1.svg" alt="RedBeet"/>
</div>
</div>
</body>
</html>
If there is a sample code of the responsive menu along with the photo in the menu, please send a comment in this post. If it is possible, please develop my same code so that I can put a picture in its menu.
I am trying to design a webpage using bootstrap. But my navbar does not collapse.
All the contents of span box are supposed to be inside the created button.But they appear on the header itself.
What could be the problem?
Here is the code:
<html lang="en">
<head>
<meta charset="utf.8">
<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">
</head>
<body>
<!--navbar navbar-inverse:black bar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar">
<div class="container">
<div class="navbar-header">
<!--button data toogle set to collapse for enabling size variations ex.mobile-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<!--span box list of items inside the button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Sample
</div><!--Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feedback
<li>Gallery
<li>Contact
</ul>
</div>
</div><!--Container-->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 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>
</body>
</html>
It's not data-toogle, it's data-toggle.
Fix the typo:
data-toogle="collapse"
I'm a noob in this kind of thing, I don't understand what thing I'm doing wrong. I don't get a button nor a navigation bar; all I get is a small button that doesn't do absolutely nothing and is not with the color that I put in my CSS. My navigation bar doesn't appear neither. Btw, is bootstrap good or is there a program better?
My code is 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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Try the following 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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.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>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SITE NAME/LOGO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HEADING1<span class="sr-only">(current)</span></li>
<li>HEADING2</li>
<li>HEADING3</li>
<li class="dropdown">
HEADING4<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>SomeThing</li>
<li>SomeThingElse</li>
<li>SomeThingElse</li>
<li class="divider"></li>
<li>SomeThingElse</li>
<li class="divider"></li>
<li>SomeThingElse</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>SomeThingElse</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
It is also better practice to use bootstrap from its online source. It makes your site faster because other sites request the same resource and it so it is stored in browsers cache.
Bootstrap is a good tool and can make building websites alot faster and easier.
Try to edit this if you are using Bootstrap 3. And Yes it is great ;)
You just insert the start of Bootstrap Navigation. Use all of it.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
So, In a dire attempt to move what is seen as the "twitter sidebar" tag here, to the far right next to the lite chat, I don't know what I'm doing wrong. I've tried everything. I mean everything!
Code is as follows
<!DOCTYPE html>
<html class="full" 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">
<meta name="description" content="">
<meta name="author" content="">
<title>Skycoding Development - Homepage</title>
<link rel="shortcut icon" href="Images/th.ico" />
<!-- Bootstrap Core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="the-big-picture.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]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-bottom" 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>
<a class="navbar-brand" href="#">Skycoding Development</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">
<!--The links on the navbar-->
<li>
Home
</li>
<li>
Forums
</li>
<li>
Wiki
</li>
<li>
tickets
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<!--Everything below here is considered "body". While not being the actuall body.-->
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1>Skycoding Development</h1>
<p>Welcome all to the new homepage!</p>
<!-- FOR 123FLASHCHAT CODE BEGIN -->
<!-- FlashChats lite code! Do not mess with the impors! -->
<!-- FOR 123FLASHCHAT CODE BEGIN -->
<script language="javascript" src="http://127.0.0.1:35555/123flashchat.js"></script>
<script language="javascript">
openSWF("http://127.0.0.1:35555/lite.swf?init_skin=blue&init_fullscreen_text=Go Full :D&init_fullscreen_url=http://127.0.0.1:35555/standard.html", "202", "318" );
</script>
<!-- FOR 123FLASHCHAT CODE END -->
<div class="col-md-6 col-sm-12">
<a class="twitter-timeline" href="https://twitter.com/Skycoding_Dev" data-widget-id="570094100829847552">Tweets by #Skycoding_Dev</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Messing with the imports can incredibly screw you over!-->
</div>
</div>
<!-- /.row -->
</div>
</div>
<div class="col-sm-4">
</div>
<!-- /.container -->
<!-- Dependicys-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My site (if neccesery): http://skycoders.synergize.co