Bootstrap responsive examples please

Question

Hello, I am new in this world of freameworks, and I have a lot of difficulty, I would like someone to give me a simple example of responsive div, which adapts to some screen sizes using the bootstrap, making some comments on the classes used. I say this because, I haven’t found anywhere on the Internet to explain with practical examples, usually it is something very theoretical, only with the syntax and functions of the framework...

Answer 1

The Bootstrap CSS framework has several liability utilities, explained in the following basic way::

In Bootstrap CSS there is the mechanism called 'grid', which is nothing more than distributing the html structure in a grid, which contains line (classe .row) and columns within this row (classes col-*-*), works as in the following example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div> 
  </div>
</div>

This brief example opens space to explain about the column classnames and the liability utilities, the column definators are defined as follows:

'.col-sized'

Being the size of the devices:

• Xs : Extra Small -> For mobile
• Sm : Small -> For tablets
• Md : Medium -> For desktop
• lg : Large -> For large screens

And number of columns can vary between 1 and 12, always adding up 12 per line, if exceeded, as cited in the official documentation:

If more than 12 Columns are placed Within a single Row, each group of extra Columns will, as one Unit, wrap onto a new line.

She will receive the property wrap and the columns that remain and/or are part of the element with more than 12 will become part of the next row, as in the following example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Sendo 9 + 4 = 13 &gt; 12, está coluna de valor 4 será quebrada como se fizesse parte de uma nova linha.</div>
  <div class="col-xs-6">.col-xs-6<br>Colunas subsequentes permanecem na próxima coluna.</div>
</div>

Another important thing about responsive Ivs are the utilities, which serve to hide or show elements according to the device, these classnames must be added to the element that should receive its property and are the following:

Visibilidate:

• .Visible-Xs-*
• .Visible-Sm-*
• .Visible-Md-*
• .Visible-ls-*

These liability utilities may receive as part of the value (no lugar do *):

• -block
• -inline
• -inline-block

The sizes are the same indicated for the size of the div, ie, '.visible-xs-block' will display in mobile resolutions, and so with others.

Concealment:

• .Hidden-Xs-*
• .Hidden-Sm-*
• .Hidden-Md-*
• .Hidden-ls-*

In the same way as to display, we can hide according to the device, ie, '.hidden-md' will hide certain element for desktop default resolutions.

Finally, still within the definitions of responsibility, we can indicate the property offset, which has the function of indicating that a certain amount of columns should be skipped in a div:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

______________________________________________________

All the examples cited in the reply were taken directly from the official page of the CSS - Bootstrap.

Material recommendations:

Bootswatch - Library of simple themes

W3schools - Easy and testable examples

Bootstrap Docs - Documentación Oficial

Answer 2

I’ll list here some cool examples I found:

EXAMPLE 1

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

    <div class="row">
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>Legend</legend>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                            Option one
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>Legend</legend>
                    <div class="form-group">
                        <label for="exampleInputEmail">
                            Email address</label>
                        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
                    </div>
                </fieldset>
            </div>
        </div>
    </div>

EXAMPLE 2

And most importantly, about not locating quality documentation for your goal, I believe you will like quite a lot of this material here, examples are not only practical but testable.