I'm sure this is a really simple question, but I'm a noob and can't figure it out. I'm trying to mess around with the Twitter-Bootstrap starter template to help myself learn HTML, CSS, and JS. I copied and pasted the source code into TextWrangler and opened the html file in Firefox. No bootstrap functionality.
I'm almost certain it's because lines like <link href="../assets/css/bootstrap.css" rel="stylesheet"> need to be altered to reflect the css/js files' addresses on my own computer. If that's the problem, how do I do this?
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
You're right in your assumption that it's because of the <link href="../assets/css/bootstrap.css" rel="stylesheet"> line.
This line is a reference to the css file. What you will need to do is save the bootstrap files to your computer in folder somewhere.
To do this, download bootstrap from http://twitter.github.io/bootstrap/ and copy the css, img and js folders into your folder.
Now in your file in TextWrangler change the href attribute to "css/bootstrap.css" it will look like this <link href="css/bootstrap.css" rel="stylesheet">.
Now save your file as index.html in the same directory as the other folders you copied in.
You will want to do the same for all other references like this one for instance <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">.
You will also see at the bottom there are references to some JavaScript files. Change those too.
Good luck!
Related
I have used this so I can expand and collapse the div upon clicking the + sign but it doesn't. It remains stiffed and doesn't expand or collapse. I tried adding and removing every unwanted script but still it doesn't work.
Also console has error:
Uncaught TypeError: $(...).slideReveal is not a function
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
Here's the source code of head being rendered.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/C5D4D1E9-07CB-5B42-A8D8-EDAC580BC537/main.js" charset="UTF-8"></script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W9FNBLV');</script>
<!-- End Google Tag Manager -->
<!-- -->
<!-- Document Title-->
<!-- =============================================-->
<!--<title>Velosi | Asset Integrity Ltd.</title>-->
<title>Careers</title>
<!-- -->
<!-- JavaScripts-->
<!-- =============================================-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="/Content/Theme/lib/CustomEase.min.js"></script>
<script src="/Content/Theme/js/config.js"></script>
<script src="/Content/Theme/js/zanimation.js"></script>
<script src="/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="/Content/Theme/js/core.js"></script>
<script src="/Content/Theme/js/main.js"></script>
<!-- DataTable -->
<script src="/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="/Content/Theme/Toaster/toastr.js"></script>
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="/Content/Theme/images/favicons/favicon.ico">
<link rel="mask-icon" href="/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
<link href="/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="/Content/Theme/css/style.css" rel="stylesheet">
<link href="/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
Updated: I used it in this sequence but still not working.
#*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*#
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/External/js/modernizr.min.js"></script>
#*<script src="~/Content/External/js/popper.min.js"></script>*#
#*<script src="~/Scripts/bootstrap.min.js"></script>*#
<script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="~/Content/Theme/lib/CustomEase.min.js"></script>
<script src="~/Content/Theme/js/config.js"></script>
<script src="~/Content/Theme/js/zanimation.js"></script>
<script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="~/Content/Theme/js/core.js"></script>
<script src="~/Content/Theme/js/main.js"></script>
<script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
<!-- DataTable -->
<script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="~/Content/Theme/Toaster/toastr.js"></script>
#RenderSection("scripts", required: false)
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
#*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*#
<link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
#*<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">*#
<!-- Template specific stylesheets-->
<link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
#*<link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">*#
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="~/Content/Theme/css/style.css" rel="stylesheet">
<link href="~/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
You add extra data-parent="#accordion" attribute in <div id="collapseOne" class="collapse" aria-labelledby="headingOne"> line. I just removed this attribute in a below code snippet. I hope it'll help you out. Thanks
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
You probably are trying to execute the method before the DOM is safe to be manipulated. The underlying issue is that you've put all your script tags in the head tag and not after the body content. Try wrapping your call in the following:
$(function() {
// Handler for .ready() called.
})
Reference: https://api.jquery.com/ready/
Unrelated to the problem, but some feedback would be to reduce the number of resources being requested on the page by bundling them. This can have a significant impact on the load time for the end user.
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!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>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.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>
<!-- 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>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
Code(In head):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
Code(In body):
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="d" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="d">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</div>
I looked and tried in many way from stackoverflow to solve this problem.But nothing worked for me.This code is working in https://jsfiddle.net/DTcHh/10972/ but when i open it with browser it is not working.
#AlexG's answer is correct (i haven't enough reputation to comment).
The very first line in the bootstrap.js is to check for jquery
if(typeof jQuery==='undefined'){throw new Error('Bootstrap\'s JavaScript requires jQuery')}
Because you load jquery after bootstrap, it will throw an exception. So even if this doesn't solve your problem with the drop down, you still must include it first.
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
here seems to be the problem. include jquery before bootstrap
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/boootstrap.min.js"></script>
jQuery after Bootstrap
jQuery before Bootstrap
Problem solved:
1)There was a console error.(Solved by Abhishek Ghosh)
2)The jquery script should be before bootstrap(Solved by AlexG)
I tested your code and found a console error. Then i tried with below CDN'S and it worked. Use these CDN and it would work fine
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
using a windows 7 and just a few days back i downloaded the bootstrap 3.3.1 dist file..... but i don't know how to install it.... i also don't know what to put for my href="???" in the link ....
this code is a mixture of my own writing and some copy/paste of the scripts from the bootstrap site... i'm totally messed up...someone please help......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edwin's School of Music</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>C:\Users\user\Desktop\bootstrap-3.3.1-dist\dist\css\bootstrap.min.css
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About</li>
<li>Materials</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h2>Welcome to...</h2>
<h1><strong>Edwin's School Of Music</strong></h1>
<h2>Make your DREAMS come true ...</h2>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
This will work & no need to install things
However, this will only work if you have an internet connection as they are being fetched from a server, rather than a local file on your machine.
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>