11 December, 2018

Bootstrap - Responsive utilities

           ,      No comments   

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.
ClassesDevices
.visible-xsExtra small (less than 768px) visible
.visible-smSmall (up to 768 px) visible
.visible-mdMedium (768 px to 991 px) visible
.visible-lgLarger (992 px and above) visible
.hidden-xsExtra small (less than 768px) hidden
.hidden-smSmall (up to 768 px) hidden
.hidden-mdMedium (768 px to 991 px) hidden
.hidden-lgLarger (992 px and above) hidden

Print Classes

The following table lists the print classes. Use these for toggling the content for print.
ClassesPrint
.visible-printYes Visible
.hidden-printVisible only to browser not to print.

Example

The following example demonstrates the use of above listed helper classes. Resize your browser or load the example on different devices to test the responsive utility classes.
<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>
 
output


✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large

Bootstrap - Responsive utilities

           ,      No comments   

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
Use these sparingly and avoid creating entirely different versions of the same site. Responsive utilities are currently only available for block and table toggling.
Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

Print Classes

The following table lists the print classes. Use these for toggling the content for print.
Classes Print
.visible-print Yes Visible
.hidden-print Visible only to browser not to print.

Example

The following example demonstrates the use of above listed helper classes. Resize your browser or load the example on different devices to test the responsive utility classes.
<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>
 
output
✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large

Bootstrap - Helper Classes

           ,      No comments   

Bootstrap - Helper Classes

Carets

Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.
<p>Caret Example<span class = "caret"></span></p>

Quick Floats

You can float an element to the left or right with class pull-left or pull-right respectively the following example demonstrates this.
<div class = "pull-left">Quick Float to left</div>

<div class = "pull-right">Quick Float to right</div>
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar chapter for details.

Center Content Blocks

Use class center-block to set an element to center.
<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

To clear the float of any element, use the .clearfix class.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Showing and Hiding Content

You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Screen Reader Content

You can hide an element to all devices except screen readers with the class .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

 

Bootstrap - Images

           ,      No comments   

Bootstrap - Images

This chapter covers the Bootstrap support for images. Bootstrap provides three classes that can be used to apply some simple styles to images −
  • .img-rounded − adds border-radius:6px to give the image rounded corners.
  • .img-circle − makes the entire image round by adding border-radius:500px.
  • .img-thumbnail − adds a bit of padding and a gray border −
The following example demonstrates this −
<img src = "/bootstrap/images/download.png" class = "img-rounded">

<img src = "/bootstrap/images/download.png" class = "img-circle">

<img src = "/bootstrap/images/download.png" class = "img-thumbnail">
 

 

Bootstrap - Helper Classes

           ,      No comments   

Bootstrap - Helper Classes

Carets

Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.
<p>Caret Example<span class = "caret"></span></p>

Quick Floats

You can float an element to the left or right with class pull-left or pull-right respectively the following example demonstrates this.
<div class = "pull-left">Quick Float to left</div>

<div class = "pull-right">Quick Float to right</div>
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar chapter for details.

Center Content Blocks

Use class center-block to set an element to center.
<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

To clear the float of any element, use the .clearfix class.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Showing and Hiding Content

You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Screen Reader Content

You can hide an element to all devices except screen readers with the class .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

 

Bootstrap - Images

           ,      No comments   

Bootstrap - Images

This chapter covers the Bootstrap support for images. Bootstrap provides three classes that can be used to apply some simple styles to images −
  • .img-rounded − adds border-radius:6px to give the image rounded corners.
  • .img-circle − makes the entire image round by adding border-radius:500px.
  • .img-thumbnail − adds a bit of padding and a gray border −
The following example demonstrates this −
<img src = "/bootstrap/images/download.png" class = "img-rounded">

<img src = "/bootstrap/images/download.png" class = "img-circle">

<img src = "/bootstrap/images/download.png" class = "img-thumbnail">
 

 

Bootstrap - Buttons

           ,      No comments   

Bootstrap - Buttons
This chapter covers the use age of Bootstrap button with examples. Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However, Bootstrap provides some options to style buttons, which are summarized in the following table −
ClassDescription
btnDefault/ Standard button.
btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons.
btn-successIndicates a successful or positive action.
btn-infoContextual button for informational alert messages.
btn-warningIndicates caution should be taken with this action.
btn-dangerIndicates a dangerous or potentially negative action.
btn-linkDeemphasize a button by making it look like a link while maintaining button behavior.
The following example demonstrates all the above button classes −
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Button Size

The following table summarizes the classes used to get buttons of various sizes −
ClassDescription
.btn-lgThis makes the button size large.
.btn-smThis makes the button size small.
.btn-xsThis makes the button size extra small.
.btn-blockThis creates block level buttons—those that span the full width of a parent.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Button State

Bootstrap provides classes which allow you to change the state of buttons as active, disabled etc. each of which are discussed in the following sections.

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. The following table summarizes classes used to make button elements and anchor elements active −
ElementClass
Button elementUse .active class to show that it is activated.
Anchor elementUse .active class to <a> buttons to show that it is activated.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Disabled State

When you disable a button, it will fade in color by 50%, and lose the gradient.
The following table summarizes classes used to make button element and anchor element disabled −
ElementClass
Button elementAdd the disabled attribute to <button> buttons.
Anchor elementAdd the disabled class to <a> buttons.
Note − This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Button Tags

You may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with <button> elements mostly to avoid cross browser inconsistency issues.
The following example demonstrates this −
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Bootstrap - Buttons

           ,      No comments   

Bootstrap - Buttons
This chapter covers the use age of Bootstrap button with examples. Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However, Bootstrap provides some options to style buttons, which are summarized in the following table −
Class Description
btn Default/ Standard button.
btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
btn-success Indicates a successful or positive action.
btn-info Contextual button for informational alert messages.
btn-warning Indicates caution should be taken with this action.
btn-danger Indicates a dangerous or potentially negative action.
btn-link Deemphasize a button by making it look like a link while maintaining button behavior.
The following example demonstrates all the above button classes −
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Button Size

The following table summarizes the classes used to get buttons of various sizes −
Class Description
.btn-lg This makes the button size large.
.btn-sm This makes the button size small.
.btn-xs This makes the button size extra small.
.btn-block This creates block level buttons—those that span the full width of a parent.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Button State

Bootstrap provides classes which allow you to change the state of buttons as active, disabled etc. each of which are discussed in the following sections.

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. The following table summarizes classes used to make button elements and anchor elements active −
Element Class
Button element Use .active class to show that it is activated.
Anchor element Use .active class to <a> buttons to show that it is activated.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Disabled State

When you disable a button, it will fade in color by 50%, and lose the gradient.
The following table summarizes classes used to make button element and anchor element disabled −
Element Class
Button element Add the disabled attribute to <button> buttons.
Anchor element Add the disabled class to <a> buttons.
Note − This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.
The following example demonstrates this −
<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Button Tags

You may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with <button> elements mostly to avoid cross browser inconsistency issues.
The following example demonstrates this −
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">

Meta

Popular Posts

  • Laravel - Configuration
    In the previous chapter, we have seen that the basic configuration files of Laravel are included in the  config  directory. In this chapte...
  • Laravel - Namespaces
    Namespaces are used in various programming languages to create a separate group of variable, functions and classes. A program may contain ...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...
  • HTML Introduction
    Introduction to Hypertext Markup Language (HTML) A way to present HTML information in a beautiful and attractive way in the World Wide ...
  • Tutorials of Laravel Overview
    Introduction Laravel is an open-source PHP framework, which is robust and easy to understand. It follows a model-view-controller design ...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...