Using bootstrap in HTML - html

I have recently started learning and practicing web development topics. I wanted to use bootstrap for things like responsive design, navigation bar and tables. I have downloaded twitter bootstrap. The files are stored on my desktop. When I try to include them in my project, I see that bootstrap has not been implemented.
Following is how I tried to implement it.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href ="css/bootstrap.min.css" rel="stylesheet" >
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>responsive layout</h1>
<p>Hello World!</p>
<p><a class="btn btn-primary btn-large">Super important »</a> </p>
</div>
</div>
</body>
</html>
Here I'm trying to create a responsive design but it doesn't work when I re-size the window or when I change to other devices.
What am I doing wrong?


Just use Bootstrap CDN links.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Your code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" >
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>responsive layout</h1>
<p>Hello World!</p>
<p><a class="btn btn-primary btn-large">Super important »</a> </p>
</div>
</div>
</body>
</html>


Try adding col-xs-12-class to your <div class="hero-unit">


Using the CDN like Srinivas Pai recommended is the easiest and in some ways the best way to get started with bootstrap, but the reason it wasn't working may be down to filepaths you've specified. Is the CSS folder on your desktop or is it within your bootstrap folder? if so then you'll need a '/' before css/bootstrap.min.css


All of solutions which posted here should work. But if you are using the latest version of bootstrap you probably should replace 'hero-unit' to 'jumbotron'. (Looks like these no 'hero-unit' class anymore.)
http://getbootstrap.com/components/#jumbotron
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Related

Bootstrap CDN is not working when I use CDN instead of hosting remotely by using the downloaded .css file

CDN fails to load as the styles don't show when I view in the browser. Please look into it and let me know what the issue is as I am having a hard time debugging. I am almost giving up and about to become a celibate. PLEASE HELP!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body>
</html>

I can't see any issue in loading CDN bootstrap file. It is working for me. Please check your browser settings.

it works fine with the Bootstrap 4.1.3 stylesheet. It is better to add the 2 meta's in the head. Documentation on https://getbootstrap.com/docs/4.1/getting-started/introduction/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

Extra pixels when using w3.css w3-row

The following html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body class="w3-red">
<div class="w3-main w3-content w3-padding">
<div class="w3-row w3-blue">
<div class="w3-quarter">
<img src="http://www.w3schools.com/w3images/girl_mountain.jpg" style="width:100%">
</div>
<div class="w3-threequarter">
<p>Hello World</p>
</div>
</div>
</div>
</body>
</html>
gives the following result. As you can see there is an extra pixel of padding below the image. Is this by design? An error on my part? A bug? Either way I find it very annoying and would love to know how to get rid of it. Thanks.

Credit here to Mats at bugzilla.
img{margin-bottom:-5px}
should be
img{vertical-align:bottom}
in w3.css

HTML-KickStart Tool Tip Error

So I have spent more than an hour trying to figure this out.
I am trying to use a ToolTip from html5-kickstart and it doesn't seem to work when I use it, but the kickstart's kitchen sink works fine. I even copied all of their code into my web server and it didn't work?
I copied their headers and it didn't work, copied their code and it didn't work.
I am using Apache 2 pretty much out of the box. everything else html5 seems to work fine, but kickstart's tool tip.
Here is my code.
<html>
<head>
<title>Please Set name in fuction!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/mainpage.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/kickstart.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/tiptip.css" />
<script src="http://192.168.77.74/xxxxdesk/js/mainpage.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/kickstart.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/jquery-1.6.4.min.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/helium.js"></script>
</head>
<body>
<nav>
<div class="grid">
<div id="title" class="col_8 left">
<span>xxxxdesk<span>
</div>
<div id="login" class="col_4 right">
<!-- Click Action -->
<button class="tooltip" data-content="#usermenu" data-action="click">
<i class="icon-user"></i> UserName <i class="icon-sort-down"></i>
</button>
<div class="tooltip-content" id="usermenu"><h5>Menu</h5>
<button class="button meduim red pill" href="index.php/auth/logout">Logout</button>
</div>
</div>
</div>
</nav>
<div class="background">
<header>
A header .........
</header>
<main>
Content ...........
</main>
</div>
<footer>
A Footer ..............
</footer>
Please note that all this code is generated by my PHP code. So it is a dynamic site, but this is all that matters concerning HTML5 Kickstart.

Ok I finally figured it out.
The kitchen sink displays an older version of the package, and it uses an older version of jQuery.
My 1st mistake was that I had the old version of jQuery.
My 2nd mistake was that I was calling jQuery after I called kickstart.js. jQuery needs to come first.
I hope this help others down the road.

Home and Search icon not showing in Jquery mobile

The Home and search icons not displaying during the output and its just showing as an hyperlink Plz help Here is my coding
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.3.2.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.mobile-1.4.3.min.js"></script>
<div data-role="page">
<div data-role="header">
Home
<h1>Welcome To My Homepage</h1>
Search
</div>
<div data-role="main" class="ui-content">
<p>Hello</p>
</div>
</div>

Just downloaded the 1.4.3 version and added it and it worked
<link rel="stylesheet" href="../css/jquery.mobile-1.4.3.min.css">

How to use Bootstrap CDN?

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>