Bootstrap

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]

<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>

Clear Floats

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:

  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

Rechtsbündig

class

pull-right

Listen

Typographie

Naming a source

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

<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>

Reverse layout

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

<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>
 
Nach oben
bootstrap.txt · Zuletzt geändert: 2024/02/29 13:36 von 127.0.0.1
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0
DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp   Dogecoin Donations Accepted Here    DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp  DFmW2CEce3htPL1uNQuHUVu4Tk6WXigFQp