Skip to content

Instantly share code, notes, and snippets.

@mgroves
Created March 24, 2014 19:43
Show Gist options
  • Select an option

  • Save mgroves/9747579 to your computer and use it in GitHub Desktop.

Select an option

Save mgroves/9747579 to your computer and use it in GitHub Desktop.
@import (reference) "bootstrap/bootstrap.less";
img {
.img-responsive
}
// here's my folder structure
http://imgur.com/8n0jTAb
<!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">
<title>Matthew D. Groves</title>
<link href="Content/style.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<img src="Content/Images/pictureIWantToBeResponsive.jpg" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
@import "bootstrap/bootstrap.less";
@import "custom.less";
@mgroves
Copy link
Copy Markdown
Author

mgroves commented Mar 24, 2014

My intent is to make all images responsive using the img-responsive mixin. Furthermore, I'm just trying to figure out how to use LESS, bootstrap and bootstrap mixins in general.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment