Bootstrap Template Not Getting Displayed
I am trying to build a webpage using this Bootstrap template (http://getbootstrap.com/examples/jumbotron/). I have placed the html and bootstrap-3.3.6 folder in the same folder. I
Solution 1:
something up with your bootstrap scripts.
I added a link to bootstrap cdn and it worked.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 --><metaname="description"content=""><metaname="author"content=""><linkrel="icon"href="../../favicon.ico"><title>Jumbotron Template for Bootstrap</title><!-- Bootstrap core CSS --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><linkhref="../../assets/css/ie10-viewport-bug-workaround.css"rel="stylesheet"><!-- Custom styles for this template --><linkhref="jumbotron.css"rel="stylesheet"><!-- Just for debugging purposes. Don't actually copy these 2 lines! --><!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--><scriptsrc="../../assets/js/ie-emulation-modes-warning.js"></script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!--[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><navclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Project name</a></div><divid="navbar"class="navbar-collapse collapse"><formclass="navbar-form navbar-right"><divclass="form-group"><inputtype="text"placeholder="Email"class="form-control"></div><divclass="form-group"><inputtype="password"placeholder="Password"class="form-control"></div><buttontype="submit"class="btn btn-success">Sign in</button></form></div><!--/.navbar-collapse --></div></nav><!-- Main jumbotron for a primary marketing message or call to action --><divclass="jumbotron"><divclass="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p><p><aclass="btn btn-primary btn-lg"href="#"role="button">Learn more »</a></p></div></div><divclass="container"><!-- Example row of columns --><divclass="row"><divclass="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div><divclass="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div><divclass="col-md-4"><h2>Heading</h2><p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div></div><hr><footer><p>© 2015 Company, Inc.</p></footer></div><!-- /container --><!-- Bootstrap core JavaScript
================================================== --><!-- Placed at the end of the document so the pages load faster --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><scriptsrc="../../assets/js/ie10-viewport-bug-workaround.js"></script></body></html>Solution 2:
If you are going to make a website with Bootsrap you should make proper directory structure. Every time I use like below.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
index.html
then you can include Js and CSs files like below
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 --><metaname="description"content=""><metaname="author"content=""><linkrel="icon"href="../../favicon.ico"><title>Jumbotron Template for Bootstrap</title><!-- Bootstrap core CSS --><linkhref="bootstrap/css/bootstrap.min.css"rel="stylesheet"></head><body><navclass="navbar navbar-inverse navbar-fixed-top"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Project name</a></div><divid="navbar"class="navbar-collapse collapse"><formclass="navbar-form navbar-right"><divclass="form-group"><inputtype="text"placeholder="Email"class="form-control"></div><divclass="form-group"><inputtype="password"placeholder="Password"class="form-control"></div><buttontype="submit"class="btn btn-success">Sign in</button></form></div><!--/.navbar-collapse --></div></nav><!-- Main jumbotron for a primary marketing message or call to action --><divclass="jumbotron"><divclass="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p><p><aclass="btn btn-primary btn-lg"href="#"role="button">Learn more »</a></p></div></div><divclass="container"><!-- Example row of columns --><divclass="row"><divclass="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div><divclass="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div><divclass="col-md-4"><h2>Heading</h2><p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p><aclass="btn btn-default"href="#"role="button">View details »</a></p></div></div><hr><footer><p>© 2015 Company, Inc.</p></footer></div><!-- /container --><!-- Bootstrap core JavaScript
================================================== --><!-- Placed at the end of the document so the pages load faster --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="bootstrap/js/bootstrap.min.js"></script></body></html>If you are going to add some JS libraries for sliders or any other plugins you can create a directory called plugins and place those plugin files and include it with your web page so it make your website directory very clean and understandable.
If you have any problems please comment I can help you.
Thanks
Post a Comment for "Bootstrap Template Not Getting Displayed"