Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/bootstrap-responsive-demos.html

Last active December 14, 2015 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/5114243 to your computer and use it in GitHub Desktop.
Save tomhodgins/5114243 to your computer and use it in GitHub Desktop.
Download ZIP
This is a document showing off the responsive classes of Bootstrap - the first demo on here shows how to insert line breaks that only show up on mobile, allowing you to cleverly cut down long line lengths before they become an issue
Raw
bootstrap-responsive-demos.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Responsive Cheat Sheet</title>
<!-- Bootstrap: with responsive, no icons -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Boostrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<!-- Source Sans via Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- HTML Section -->
<div class="container">
<h1 class="site-title">Boostrap Respsonsive <br class="hidden-desktop">Cheat Sheet</h1>
<div class="row-fluid">
<div class="span12">
<!-- Begin Mobile-Only Line Breaks -->
<section id="mobile-only-line-breaks">
<h2>Mobile-only Line Breaks</h2>
<p>Since you can make an <abbr>HTML</abbr> tag only show up on mobile devices using the responsive visibility classes, we can insert phone-only line breaks to cut down headlines at narrow screen sizes. The demo below shows a mobile-only line-break: hover to see the location, resize your browser to see it in action. Once the browser hits phone width, the <code>class="visible-phone"</code> class we added to the <code>&lt;br&gt;</code> in the markup and breaks the line. You can set line breaks for tablets only using the class <code>class="visible-tablet"</code> If you want the line breaks to appear on tablet &amp; phone, you can use the class <code>class="hidden-desktop"</code> to make it only visible everywhere but at desktop width.
<div class="hero-unit" id="mobile-line-break-demo">
<h1>This is a responsive <br class="visible-phone">LINE<span class="hidden-phone divider">|</span><br class="visible-phone">BREAK</h1>
</div>
<pre id="mobile-line-break-code">
&lt;h1&gt;LINE<em>&lt;br class="visible-phone"&gt;</em>BREAK&lt;/h1&gt;
</pre>
</section>
<!-- End Mobile-Only Line Breaks -->
</div>
</div>
</div>
<!-- JavaScript Section -->
<script type="text/javascript">
$(document).ready(function(){
// custom JavaScript goes here
});
</script>
<!-- CSS Section -->
<style>
* {
font-family: 'Source Sans Pro', sans-serif;
}
.center {
text-align: center;
}
body {
background: #eee;
}
.container {
background: #fff;
padding: 30px;
margin: 20px auto;
height: 100%;
box-sizing: border-box;
box-shadow: rgba(0,0,0,0.1) 0px 0px 30px;
}
abbr {
font-weight: 600;
font-size: 85%;
}
.site-title {
margin-bottom: 25px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 34pt;
line-height: 34pt;
}
pre em {
font-style: normal;
font-family: inherit;
color: #8c0000;
}
/* Start Mobile-Only Line Breaks */
#mobile-line-break-demo h1 {
font-size:500%;
}
#mobile-line-break-demo {
cursor: pointer;
margin-top: 20px;
}
.divider {
font-weight: 200 !important;
color: transparent !important;
margin: 0 -10px !important;
padding: 0 !important;
text-shadow: #00c4cc 0px 0px 150px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hero-unit:hover .divider {
text-shadow: #00c4cc 0px 0px 0px;
}
/* End Mobile-Only Line Breaks */
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment