====== Bootstrap ======

[[http://getbootstrap.com/getting-started/]]

[[http://www.w3schools.com/bootstrap/default.asp|w3school-Tutorial/Referenz]]


[[http://getbootstrap.com/css/]]

===== Grids =====

Immer erst .container (full width mit .container-fluid), dann div .row, dann die Spalten. Diese müssen zusammen immer 12 ergeben.


  * xs x-small (for phones)
  * sm small (for tablets)
  * md middle (for desktops)
  * lg large (for larger desktops)

also: col-[size]-[anzahl von 12]

<code>

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

</code>

==== Clear Floats ====

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:
<code>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
</code>

==== Rechtsbündig ====
class
<code>
pull-right
</code>

===== Listen =====

[[https://v4-alpha.getbootstrap.com/components/list-group/]]

===== Typographie =====

[[https://v4-alpha.getbootstrap.com/content/typography/]]

==== Naming a source ====


Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite> .

<code>
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</code>

==== Reverse layout ====


Add .blockquote-reverse for a blockquote with right-aligned content.

<code>
<blockquote class="blockquote blockquote-reverse">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</code>