How do you use bootstrap in notepad++?

How do you use bootstrap in notepad++?
0

#1

How do you use bootstrap in notepad++? The link in the bootstrap section of the course doesn’t seem to be working.


#2

You can use the file from a CDN (say, from BootstrapCDN). Your <link> would look something like

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

#3

I tested the link by trying to replicate the second challenge of the chapter (“Make Images Mobile Responsive”) which involves making a picture with cats fit the width of the page. It didn’t work. Either the link didn’t work or I did something wrong.

Here’s my code:

<!Doctype html>
  <html>

	  <title>
		Generic Website Template
	  </title>

	  <head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  </head>

	  <body>
		<div id = "Header">
			<img class = "img-responsive" src = "https://bit.ly/fcc-running-cats"/>
		</div>

		<div id = "Taskbar">
		</div>

		<div id = "Left">
		</div>

		<div id = "Right">
		</div>

		<div id = "Footer">
		</div>
	  </body>
</html>

Run this in notepad++ and see the result. What have I done wrong?


#4

You are using the bootstrap img-responsive class, which will force the width of the image to not be any larger than the container it is in. However, it will not allow the image to grow beyond it’s original size If you want the image to expand to the page width, then put the following in you css file:

img {
  width:100%;
}