Bootstrap 4 Responsive Utilities

Learn how to use Bootstrap 4 Responsive Utilities for quick mobile friendly development.

Bootstrap 4 Responsive Utilities

For Quick Responsive Utilities development, bootstrap gives a set of utility classes which can be used to show and hide content based on devices. The owner and creator of these glyphicons have provided them free  to all Bootstrap users under Create Commons licence.Visit the Home page to see the complete list here

Example: Bootstrap 4 List Group Basics

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 List Group : Basics</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<style>
  .bootstrap-demo{margin:10px;}
  .list-group{width:500px;}
</style>
<body>
<div class="bootstrap-demo">

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Mars</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Earth</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Jupiter</a>
  </li>
  <li class="nav-item">
  <!-- disabled class -->
    <a class="nav-link disabled" href="#">Pluto</a>
  </li>
</ul>

</div>
</body>
</html>

Bootstrap 4 List Groups : Labels

Bootstrap 4

The List Group items can be added with labels using class .label, context is added using class label-*. The Alignement of the label is set using class .pull-right, the class .label-pill is to create round shaped pill.

 

Bootstrap 4

Example: Bootstrap 4 List Groups Labels

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 List Groups : Labels</title>
 <link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.js"></script>
</head>
<style>
  .bootstrap-demo{margin:10px;}
    .list-group{width:500px;}
</style>
<body>
<div class="bootstrap-demo">

<ul class="list-group">
  <li class="list-group-item">
    <span class="label label-default label-pill pull-right">51</span>
   United States of America
  </li>
  <li class="list-group-item">
    <span class="label label-success label-pill pull-right">30</span>
   India
  </li>
  <li class="list-group-item">
    <span class="label label-danger label-pill pull-right">29</span>
    China
  </li>
</ul>

</div>
</body>
</html>

Bootstrap 4 List Groups : Linked items

✔ Visible on extra small Extra small  ✔ Visible on small or narrowerSmall or narrower  ✔ Visible on medium or narrower Medium or narrower

✔ Visible on large or narrowerLarge or narrower  ✔ Visible on small or widerSmall or wider ✔ Visible on medium or widerMedium or wider

✔ Visible on large or widerLarge or wider ✔ Visible on extra large Extra large  ✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small

✔ Your viewport is exactly small Your viewport is NOT exactly small  ✔ Your viewport is exactly medium Your viewport is NOT exactly medium

✔ Your viewport is exactly large Your viewport is NOT exactly large  ✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large

 

Instead of a simple list, the list can be liked using element <a>, also class .active is used to set the currently active list item.

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman