charlenopires/Flexbox & Bootstrap 3.markdown

## Flexbox & Bootstrap 3.markdown

      
    Raw
  

              Flexbox & Bootstrap 3.markdown
            
          
    Flexbox & Bootstrap 3

Illustrating vertically centered, responsive content.
A Pen by Robert Richey on CodePen.
License.

  
## index.html
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <p class="navbar-text navbar-nav navbar-left">Flexbox &amp; Bootstrap 3</p>
      <p class="navbar-text navbar-nav navbar-right">Illustrating vertically centered, responsive content</p>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
	     <div class="well clearfix">
	       <div class="col-sm-4">
	         <div class="r"><p>Red</p></div>
	       </div>

			  <div class="col-sm-4">
            <div class="g"><p>Green</p></div>
			  </div>

          <div class="col-sm-4">
            <div class="b"><p>Blue</p></div>
          </div>
        </div><!-- /.well -->
      </div><!-- /.col-sm-12 -->
    </div><!-- /.row -->
  </div><!-- /.container -->

  <div class="modal fade" id="contact-us">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Click Counter</h4>
        </div>

        <div class="modal-body"></div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" id="reset">Reset</button>
          <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <p class="navbar-text navbar-nav navbar-left"><span class="glyphicon glyphicon-upload"></span><a href="#"> Back to top</a></p>

    <p class="navbar-text navbar-nav navbar-right" id="modal-example"><span class="glyphicon glyphicon-comment"></span><a data-toggle="modal" data-target="#contact-us"> Modal Example</a></p>
  </nav>

</body>

## script.js
$(function() {
  var color_clicks = 0;

  // cache DOM
  var $color_box = $(".col-sm-4 div");
  var $modal_example = $("#modal-example");
  var $modal = $(".modal");
  var $r = $(".r");
  var $g = $(".g");
  var $b = $(".b");
  var $reset = $("#reset");

  function newColor(n) {
    n = n || 256;
    return Math.floor(Math.random() * n);
  }

  function rgbString(r, g, b) {
    return "rgb(" + r + ", " + g + ", " + b + ")";
  }

  $color_box.click(function() {
    var r = newColor();
    var g = newColor();
    var b = newColor();
    var color = rgbString(r, g, b);
    $(this).css("background", color);
    $(this).find("p").text(color).css("font-size","0.6em");
    color_clicks++;
  });

  $modal_example.click(function() {
    var $p = $("<p></p>");
    $p.text("You clicked a color box " + color_clicks + " times!");
    $modal.find(".modal-body").append($p);
  });

  $modal.on("hidden.bs.modal", function() {
    $modal.find(".modal-body p").remove();
  });

  $reset.click(function() {
    color_clicks = 0;
    $r.css("background","#f00");
    $r.find("p").text("Red").css("font-size","40px");

    $g.css("background","#0f0");
    $g.find("p").text("Green").css("font-size","40px");

    $b.css("background","#00f");
    $b.find("p").text("Blue").css("font-size","40px");
  })
});

## scripts
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

## style.css
html, body { height: 100%; }

body {
  background: #888;

  /*
     By default, the navbar is 50px high. On Codepen, there seems to be
     a need for additional padding as a result of the UI
  */
  padding-top: 70px;
  padding-bottom: 50px;

  /* this element is a flex box containing flex items */
	display: flex;

	/* vertically center the children of this element */
	align-items: center;
}

.r,
.g,
.b {
	color: white;
	font-size: 40px;
	min-width: 150px;
	min-height: 150px;
	margin: 0 auto;

	/* these containers are flex boxes containing flex items */
	display: flex;

	/* horizontally center text */
	justify-content: center;

	/* vertically center text */
	align-items: center;

	/* outline text */
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.r { background: #f00; }
.g { background: #0f0; }
.b { background: #00f; }

.well { border: 5px solid #444; background: #222; }

/* horizontally center bottom navbar */
nav { margin: 0 auto; }

a:hover { text-decoration: none; cursor: pointer; }

.glyphicon-comment { transform: rotateY(180deg); }

.navbar.navbar-inverse p.navbar-right { padding-right: 15px; }

.col-sm-4 div:hover {
  border: 2px solid #fff;
  box-shadow: 0 0 20px #fff;
  border-radius: 5px;
  cursor: pointer;
}

@media (max-width: 767px)  {
  /* Paragraph text in the navbars are unexpectedly too far left */
  .navbar-fixed-top p, nav p { padding-left: 30px; }
  body {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar { position: static; }
  nav { position: static; }
}

/*
  Below is a bit of a hack to get the bottom navbar to act like it's in a
  Bootstrap container. Placing the bottom navbar into a container has
  undesirable effects (bug perhaps?). At any rate, the point here is to
  implement a fixed position, centered, bottom navbar whose width is that
  of a responsive Bootstrap container.
*/
@media (min-width: 768px)  { nav { max-width: 720px; } }
@media (min-width: 992px)  { nav { max-width: 940px; } }
@media (min-width: 1200px) { nav { max-width: 1140px; } }

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<p class="navbar-text navbar-nav navbar-left">Flexbox & Bootstrap 3</p>
	<p class="navbar-text navbar-nav navbar-right">Illustrating vertically centered, responsive content</p>
	</div>
	</div>

	<div class="container">
	<div class="row">
	<div class="col-xs-12">
	<div class="well clearfix">
	<div class="col-sm-4">
	<div class="r"><p>Red</p></div>
	</div>

	<div class="col-sm-4">
	<div class="g"><p>Green</p></div>
	</div>

	<div class="col-sm-4">
	<div class="b"><p>Blue</p></div>
	</div>
	</div><!-- /.well -->
	</div><!-- /.col-sm-12 -->
	</div><!-- /.row -->
	</div><!-- /.container -->

	<div class="modal fade" id="contact-us">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	<h4 class="modal-title">Click Counter</h4>
	</div>

	<div class="modal-body"></div>

	<div class="modal-footer">
	<button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" id="reset">Reset</button>
	<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
	</div>
	</div>
	</div>
	</div>

	<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
	<p class="navbar-text navbar-nav navbar-left"><span class="glyphicon glyphicon-upload"></span><a href="#"> Back to top</a></p>

	<p class="navbar-text navbar-nav navbar-right" id="modal-example"><span class="glyphicon glyphicon-comment"></span><a data-toggle="modal" data-target="#contact-us"> Modal Example</a></p>
	</nav>

	</body>
	$(function() {
	var color_clicks = 0;

	// cache DOM
	var $color_box = $(".col-sm-4 div");
	var $modal_example = $("#modal-example");
	var $modal = $(".modal");
	var $r = $(".r");
	var $g = $(".g");
	var $b = $(".b");
	var $reset = $("#reset");

	function newColor(n) {
	n = n \|\| 256;
	return Math.floor(Math.random() * n);
	}

	function rgbString(r, g, b) {
	return "rgb(" + r + ", " + g + ", " + b + ")";
	}

	$color_box.click(function() {
	var r = newColor();
	var g = newColor();
	var b = newColor();
	var color = rgbString(r, g, b);
	$(this).css("background", color);
	$(this).find("p").text(color).css("font-size","0.6em");
	color_clicks++;
	});

	$modal_example.click(function() {
	var $p = $("<p></p>");
	$p.text("You clicked a color box " + color_clicks + " times!");
	$modal.find(".modal-body").append($p);
	});

	$modal.on("hidden.bs.modal", function() {
	$modal.find(".modal-body p").remove();
	});

	$reset.click(function() {
	color_clicks = 0;
	$r.css("background","#f00");
	$r.find("p").text("Red").css("font-size","40px");

	$g.css("background","#0f0");
	$g.find("p").text("Green").css("font-size","40px");

	$b.css("background","#00f");
	$b.find("p").text("Blue").css("font-size","40px");
	})
	});
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	html, body { height: 100%; }

	body {
	background: #888;

	/*
	By default, the navbar is 50px high. On Codepen, there seems to be
	a need for additional padding as a result of the UI
	*/
	padding-top: 70px;
	padding-bottom: 50px;

	/* this element is a flex box containing flex items */
	display: flex;

	/* vertically center the children of this element */
	align-items: center;
	}

	.r,
	.g,
	.b {
	color: white;
	font-size: 40px;
	min-width: 150px;
	min-height: 150px;
	margin: 0 auto;

	/* these containers are flex boxes containing flex items */
	display: flex;

	/* horizontally center text */
	justify-content: center;

	/* vertically center text */
	align-items: center;

	/* outline text */
	text-shadow:
	-1px -1px 0 #000,
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
	}

	.r { background: #f00; }
	.g { background: #0f0; }
	.b { background: #00f; }

	.well { border: 5px solid #444; background: #222; }

	/* horizontally center bottom navbar */
	nav { margin: 0 auto; }

	a:hover { text-decoration: none; cursor: pointer; }

	.glyphicon-comment { transform: rotateY(180deg); }

	.navbar.navbar-inverse p.navbar-right { padding-right: 15px; }

	.col-sm-4 div:hover {
	border: 2px solid #fff;
	box-shadow: 0 0 20px #fff;
	border-radius: 5px;
	cursor: pointer;
	}

	@media (max-width: 767px) {
	/* Paragraph text in the navbars are unexpectedly too far left */
	.navbar-fixed-top p, nav p { padding-left: 30px; }
	body {
	display: block;
	padding-top: 0;
	padding-bottom: 0;
	}
	.navbar { position: static; }
	nav { position: static; }
	}

	/*
	Below is a bit of a hack to get the bottom navbar to act like it's in a
	Bootstrap container. Placing the bottom navbar into a container has
	undesirable effects (bug perhaps?). At any rate, the point here is to
	implement a fixed position, centered, bottom navbar whose width is that
	of a responsive Bootstrap container.
	*/
	@media (min-width: 768px) { nav { max-width: 720px; } }
	@media (min-width: 992px) { nav { max-width: 940px; } }
	@media (min-width: 1200px) { nav { max-width: 1140px; } }