Installation - restructuredBootstrap & restructuredWeb

Install the extension¶

pip install restructuredBootstrap

Update sphinx-project/conf.py¶

extensions = [
    # Import all components
    'restructuredBootstrap',
]

View sphinx setup

Provided by docutils by default, style as required
http://docutils.sourceforge.net/docs/ref/rst/directives.html#admonitions

Option List¶

.. attention:: <Content>

  <Content>

.. attention:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Attention

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. caution:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caution

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. danger:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. error:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. hint:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hint

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. important:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Important

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. note:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. seealso:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

See also

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. tip:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. warning:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  Maecenas non mi et nibh rutrum auctor.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas non mi et nibh rutrum auctor.

https://getbootstrap.com/docs/3.3/components/#alerts

Option List¶

.. alert:: <Content>
  :class: <Class>
  :dismissible:

  <Content>

.. alert-success:: **Success!** Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :dismissible:

Success! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. alert-info:: **Info!** Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. alert-warning:: **Warning!** Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. alert-danger:: **Danger!** Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger! Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. alert-info:: :fa:`info-circle fw`  **Links** are automatically applied a ``.alert-link`` class.

  → `View the Bootstrap docs`_

  .. _view the Bootstrap docs: https://getbootstrap.com/docs/3.3/components/#alerts

Links are automatically applied a .alert-link class.

→ View the Bootstrap docs

Button’s with a href will be rendered as an anchor element <a href="...">
Buttons without a href will be rendered as a <button/> element
Classes xs,sm,lg are automatically expanded
https://getbootstrap.com/docs/3.3/css/#buttons

Option List¶

.. button:: <ButtonText>
  :class: <Class> [xs,sm,lg]
  :href: <URI | "#" | "void">
  :doc: <DocName>
  :target: _blank
  :collapse: <HTML ID of container to collapse>
  :name: <HTML ID of this button>
  :onclick: <Javascript>
  :onmouseover: <Javascript>
  :onmouseout: <Javascript>

.. button:: :fa:`cog fw`  View the advanced usage
  :class: large block
  :doc: advanced-usage-sphinx
  :target: _blank

View the advanced usage

Default button¶

.. button:: Default
.. button-primary:: Primary
.. button-success:: Success
.. button-info:: Info
.. button-warning:: Warning
.. button-danger:: Danger
.. button-link:: Link
.. button-plain:: Plain

XS Size¶

.. button-xs:: Default
.. button-xs-primary:: Primary
.. button-xs-success:: Success
.. button-xs-info:: Info
.. button-xs-warning:: Warning
.. button-xs-danger:: Danger
.. button-xs-link:: Link

SM Size¶

.. button-sm:: Default
.. button-sm-primary:: Primary
.. button-sm-success:: Success
.. button-sm-info:: Info
.. button-sm-warning:: Warning
.. button-sm-danger:: Danger
.. button-sm-link:: Link

LG Size¶

.. button-lg:: Default
.. button-lg-primary:: Primary
.. button-lg-success:: Success
.. button-lg-info:: Info
.. button-lg-warning:: Warning
.. button-lg-danger:: Danger
.. button-lg-link:: Link

Events, e.g: for analytics tracking¶

.. button-link:: Mouse Over / Mouse Out / Click me
  :onclick: $('#btn-event-test').css('backgroundColor', '#5cb85c').text('Clicked')
  :onmouseover: $('#btn-event-test').css('backgroundColor', '#d9534f').text('Mouse Over')
  :onmouseout: $('#btn-event-test').css('backgroundColor', '#f0ad4e').text('Mouse Out')

.. container:: well well-sm
  :name: btn-event-test

  Test well container

Test well container

Use the vertical flag to indicate a vertical group
Add xs,sm,lg classes to ..button-group:: to indicate the sizing of all buttons nested within it

Option List¶

.. button-group:: <Class> [xs,sm,md,lg,justified]
  :vertical:

  <Button>
  <Button>

Add xs,sm,lg classes to .. button-group:: to size all the buttons nested within it¶

.. button-group:: xs justified

  .. button-primary:: :fa:`link`  Horizontal Link 1
    :href: https://google.com
    :target: _blank

  .. button-group:: xs

    .. button-primary:: :fa:`link`  Horizontal Dropdown Link 2  :fa:`caret-down`
      :class: toggle

    - `Link 1 <https://google.com>`_
    - `Link 2 <https://facebook.com>`_

Horizontal Link 1

Use the vertical flag to indicate a vertical group¶

.. button-group:: sm
  :vertical:

  .. button:: :fa:`link`  Vertical Link 1
    :class: primary

  .. button:: :fa:`link`  Vertical Link 2
    :class: primary

Use a toolbar to group multiple buttons¶

.. button-toolbar::

  .. button-group::

    .. button-primary:: Blue
      :onmouseover: $('#btn-toolbar-demo').css('backgroundColor', 'lightblue');

    .. button-danger:: Red
      :onmouseover: $('#btn-toolbar-demo').css('backgroundColor', 'red');

  .. button-group::

    .. button-success:: Green
      :onmouseover: $('#btn-toolbar-demo').css('backgroundColor', 'lightgreen');

    .. button-warning:: Green
      :onmouseover: $('#btn-toolbar-demo').css('backgroundColor', 'yellow');

    .. button:: void()
      :onclick: $('#btn-toolbar-demo').css('backgroundColor', '#f5f5f5');

|

.. well-sm::
  :name: btn-toolbar-demo

  :h4:`Button toolbar demo`

A custom callout similar to .bs-callouts provided by bootstrap

Note: This directive requires adding some custom CSS styles. (click here to open the modal)

Option List¶

.. callout:: <Content>
  :title: <HeadingTitle> [Optional]

  <Content>

.. callout::

  A ``default`` call out with no title.

A default call out with no title.

.. callout:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: Heading for default callout

Heading for default callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. callout-primary:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: Heading for primary callout

Heading for primary callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. callout-success:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: Heading for success callout

Heading for success callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. callout-info:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: Heading for info callout

Heading for info callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. callout-warning:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: Heading for warning callout

Heading for warning callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. callout-danger:: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  :title: :fa:`exclamation-triangle fw`  Heading for danger callout

Heading for danger callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. clearfix:: visible-xs-block visible-sm

<div class="clearfix visible-xs-block visible-sm"></div>

.. button-primary:: **Toggle the collapsible container below.**
  :class: center-block sm
  :collapse: div-id-to-collapse
  :href: void
.. .. Use ↑ `void` to render an anchor tag

.. .. Use "out/in" to show and hide the div by default on page load

.. container:: collapse out text-center
  :name: div-id-to-collapse

  |

  .. jumbotron::

    :h1:`😜💩😝`

Toggle the collapsible container below.

😜💩😝

Containers do not have a class option, pass custom classes as an argument

Option List¶

.. container:: <Class>

  <Content>

.. container::

  An empty ``div`` with no ``.container`` class

An empty div with no .container class

Jumbotron¶

.. jumbotron::

  :h3:`I\'m a Jumbotron`

I’m a Jumbotron

Well¶

.. well::

  I'm a well

I’m a well

.. well-sm::

  I'm a well-sm

I’m a well-sm

restructuredText
  reStructuredText (sometimes abbreviated as RST, ReST, or reST) is a file
  format for textual data used primarily in the Python programming language
  community for technical documentation.

Twitter Bootstrap
  Bootstrap is a free and open-source front-end web framework for designing
  websites and web applications. It contains HTML- and CSS-based design templates
  for typography, forms, buttons, navigation and other interface components,
  as well as optional JavaScript extensions.

restructuredText: reStructuredText (sometimes abbreviated as RST, ReST, or reST) is a file format for textual data used primarily in the Python programming language community for technical documentation.
Twitter Bootstrap: Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Use the .. rst-class directive to add a dl-horizontal class¶

.. rst-class:: dl-horizontal

restructuredText
  reStructuredText (sometimes abbreviated as RST, ReST, or reST) is a file
  format for textual data used primarily in the Python programming language
  community for technical documentation.

Twitter Bootstrap
  Bootstrap is a free and open-source front-end web framework for designing
  websites and web applications. It contains HTML- and CSS-based design templates
  for typography, forms, buttons, navigation and other interface components,
  as well as optional JavaScript extensions.

restructuredText: reStructuredText (sometimes abbreviated as RST, ReST, or reST) is a file format for textual data used primarily in the Python programming language community for technical documentation.
Twitter Bootstrap: Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

12,-,6,- is parsed into col-xs-12 col-md-6
A - (dash) in the width option indicates that particular size class will not be added
You can also use the ShorthandExpansion in push, pull and offset columns
https://getbootstrap.com/docs/3.3/css/#grid

Option List¶

.. row:: <Class>
  :class: <Class>

  .. column:: <Class> [ShorthandExpansion: 12,-,6,-]
    :class: <Class>
    :width:  <Integer> or [ShorthandExpansion]
    :offset: <Integer> or [ShorthandExpansion]
    :pull:   <Integer> or [ShorthandExpansion]
    :push:   <Integer> or [ShorthandExpansion]

.. A single integer will default to xs (mobile first)
.. 6         → col-xs-6

.. Use the ShorthandExpansion syntax to size your way up to desktop
.. a `-` (dash) means "skip this size class"
.. 12,-,6    → col-xs-12,col-sm-6
.. 12,-,6,4  → col-xs-12,col-sm-6,col-lg-4

Columns¶

Pass width via an argument or the :width: option¶

.. row::

  .. column:: bg-success
    :width: 12,-,6

    This is the first column.

    ``col-xs-12 col-md-6``

  .. column:: 12,-,6,- bg-primary text-right

    This is the second column.

    ``col-xs-12 col-md-6``

This is the first column.

col-xs-12 col-md-6

This is the second column.

col-xs-12 col-md-6

Push & Pull¶

Push and pull columns via the :push: and :pull: options¶

.. row::

  .. column:: 12,0,6,0 bg-success
    :push: -,-,6,-

    This is the first column, but on `md` and larger, it has been pushed by `6`.

    ``col-xs-12 col-md-6 col-md-push-6 bg-success``

  .. column:: 12,0,6,0 bg-primary
    :pull: -,-,6

    This is the second column, but on `md` and larger, it has been pulled by `6`.

    ``col-xs-12 col-md-6 col-md-pull-6 bg-primary``

This is the first column, but on md and larger, it has been pushed by 6.

col-xs-12 col-md-6 col-md-push-6 bg-success

This is the second column, but on md and larger, it has been pulled by 6.

col-xs-12 col-md-6 col-md-pull-6 bg-primary

Offset¶

Offset columns via the :offset: option¶

.. Shorthand syntax (3,-,6,0) => (col-xs-offset-3, col-md-offset-6, col-lg-offset-0)

.. row::

  .. column::
    :width: 6
    :offset: 3

    .. container:: well well-sm

      This is a single column. It has been offset by 3 to center it on `xs` and larger.

      ``col-xs-6 col-xs-offset-3``

This is a single column. It has been offset by 3 to center it on xs and larger.

col-xs-6 col-xs-offset-3

Option List¶

.. image:: <URL>
  :class: <Class> [img-responsive, img-rounded, img-circle, img-thumbnail]
  :height: <Height> [10em 10ex 10px 10in 10cm 10mm 10pt 10pc 10%]
  :width: <Width> [10em 10ex 10px 10in 10cm 10mm 10pt 10pc 10%]
  :align: <Alignment> [top, middle, bottom, left, center, right]
  :target: <URI or reference name>
  :alt: <AltText>

.. image:: images/placeholder-50.jpg
   :class: img-responsive
   :align: center

.. image:: images/placeholder-50.jpg
   :class: img-rounded

.. image:: images/placeholder-50.jpg
   :class: img-circle

.. image:: images/placeholder-50.jpg
   :class: img-thumbnail

.. row::

  .. column:: 10,6,0,4

    .. container:: thumbnail

      .. image:: images/placeholder-200.jpg

      .. container:: caption

        :h4:`Thumbnail Label`

        Some Text

        .. button-primary:: :fa:`link fw` Link
          :class: primary block
          :href: https://getbootstrap.com/docs/3.3/css/#buttons
          :target: _blank

Thumbnail Label

Some Text

Link

.. lead:: A *single* ``.lead`` paragraph rendered as a ``p.lead``

A single .lead paragraph rendered as a p.lead

.. lead:: A ``.lead`` paragraph

  A second paragraph rendered as a ``div.lead > p``

A .lead paragraph

A second paragraph rendered as a div.lead > p

.. Contextual variants

.. lead-muted:: A lead paragraph with a ``.text-muted`` class

.. lead-primary:: A lead paragraph with a ``.text-primary`` class

.. lead-success:: A lead paragraph with a ``.text-success`` class

.. lead-info:: A lead paragraph with a ``.text-info`` class

.. lead-warning:: A lead paragraph with a ``.text-warning`` class

.. lead-danger:: A lead paragraph with a ``.text-danger`` class

A lead paragraph with a .text-muted class

A lead paragraph with a .text-primary class

A lead paragraph with a .text-success class

A lead paragraph with a .text-info class

A lead paragraph with a .text-warning class

A lead paragraph with a .text-danger class

<hr />¶

.. hr::

.. use a custom class

.. hr:: dotted

.. hr:: dashed

<br />¶

.. br::

.. br:: small

.. rst-class:: list-unstyled

#. This is a auto-enumerated ``list-unstyled``.
#. This is the second item in the ``list-unstyled``.

This is a auto-enumerated list-unstyled.
This is the second item in the list-unstyled.

.. rst-class:: list-inline

#. Inline Item #1
#. Inline Item #2

Inline Item #1
Inline Item #2

* This is a bulleted list.
* It has two items, the second
  item uses two lines. (note the indentation)

This is a bulleted list.
It has two items, the second item uses two lines. (note the indentation)

3. This is a numbered list.
4. This is the fourth item in the list.
#. This should be the fifth item in the list.

This is a numbered list.
This is the fourth item in the list.
This should be the fifth item in the list.

#. This is a auto-enumerated list.
#. This is the second item in the list.

This is a auto-enumerated list.
This is the second item in the list.

Basic List Group¶

List items within list groups are automatically applied the list-group-item class when in a parent list-group.

.. rst-class:: list-group

- :fa:`home fw`  Home with a badge icon :badge:`13`
- :fa:`exclamation fw`  Add ``fw`` for font awesome icons inside a list
- :fa:`info fw`  Bullets are "-", "*" or "+"
- :fa:`info fw`  Continuing text must be aligned
  after the bullet and whitespace.

Home with a badge icon 13
Add fw for font awesome icons inside a list
Bullets are “-“, “*” or “+”
Continuing text must be aligned after the bullet and whitespace.

Linked Items¶

.. list-group::

 .. list-group-item-success::
    :href: http://www.google.com
    :target: _blank

    A link to Google

 .. list-group-item-info::
    :href: http://www.amazon.com
    :target: _blank

    A link to Amazon

 .. list-group-item-warning::
    :href: http://www.facebook.com
    :target: _blank

    A link to Facebook

 .. list-group-item-danger::
    :button:
    :name: id-for-success

    Use the ``:button:`` flag to render this item as a button

 .. list-group-item:: disabled
    :button:

    This is a disabled button

A link to Google A link to Amazon A link to Facebook

Contextual Items¶

.. list-group::

  .. list-group-item-success::

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  .. list-group-item-info::

    Cum sociis natoque penatibus et magnis dis parturient montes.

  .. list-group-item-warning::

    In eu ultricies dolor. Phasellus quis odio non nulla facilisis.

  .. list-group-item-danger::

     Ut lobortis sed velit eget pellentesque. Maecenas et sapien.

  .. list-group-item:: disabled

     Aenean at faucibus tellus. Curabitur tincidunt dolor vitae magna porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cum sociis natoque penatibus et magnis dis parturient montes.

In eu ultricies dolor. Phasellus quis odio non nulla facilisis.

Ut lobortis sed velit eget pellentesque. Maecenas et sapien.

Aenean at faucibus tellus. Curabitur tincidunt dolor vitae magna porttitor.

Custom Content¶

.. list-group::

 .. list-group-item-success::

    :h4:`Text Heading for item`

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 .. list-group-item-info::
    :href: http://www.google.com
    :target: _blank

    :h4:`Text Heading for item`

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 .. list-group-item-warning::
    :button:

    :h4:`Text Heading for item`

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 .. list-group-item-danger::
    :href: http://www.google.com
    :target: _blank

    :h4:`:fa:\`book fw pl\` Text Heading for item`

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 .. list-group-item:: disabled
    :href: http://www.google.com
    :target: _blank

    :h4:`:fa:\`times fw pl\` Text Heading for item`

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Heading for item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Heading for item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Heading for item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Heading for item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Version 3.3.2 or newer has a bug where this is not displayed correctly
- https://github.com/twbs/bootstrap/issues/15958
- https://github.com/twbs/bootstrap/issues/15795
- For 3.3.7, add width: 10%; to .media-left and .media-right for a quick fix

Option List¶

.. media:: <Class>

  .. media-left:: <Class> [media-top, media-middle, media-bottom]
  .. media-right:: <Class> [media-top, media-middle, media-bottom]

  .. media-body:: <MediaHeading>
    :heading-target: <URI>
    :page-header: <Flag> {# wrap MediaHeading in a div.page-header #}

    <Content>

Alignment¶

Pass alignment classes as arguments¶

.. media::

  .. media-left:: media-top

    .. image:: images/placeholder-50.jpg
      :target: http://google.com

  .. media-body:: Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
    ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
    tempus viverra turpis.

.. media::

  .. media-left:: media-middle

    .. image:: images/placeholder-50.jpg

  .. media-body:: Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
    ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
    tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

.. media:: text-right

  .. media-right:: media-middle

    .. image:: images/placeholder-50.jpg

  .. media-body:: Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
    ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
    tempus viverra turpis.

.. media:: text-right

  .. media-right:: media-bottom

    .. image:: images/placeholder-50.jpg

  .. media-body:: Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
    ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
    tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media Icons¶

Use icons and add links to headings¶

.. media:: text-left

  .. media-left:: media-middle

    :fa:`file-code-o 3x fw tm`

  .. media-body:: Media heading link
    :heading-target: https://www.google.com

    Cras sit amet nibh libero, in gravida nulla.

.. media:: text-right

  .. media-right:: media-middle

    :fa:`file-pdf-o 3x fw tm`

  .. media-body:: Media heading link
    :heading-target: https://www.google.com

    Nulla vel metus scelerisque ante sollicitudin commodo.

Media heading link

Cras sit amet nibh libero, in gravida nulla.

Media heading link

Nulla vel metus scelerisque ante sollicitudin commodo.

.. media:: text-left text-success

  .. media-left:: media-middle

    :fa:`comment 3x fw`

  .. media-body:: Media heading

    Cras sit amet nibh libero, in gravida nulla.

.. media:: text-right text-danger

  .. media-right:: media-middle

    :fa:`comment-o 3x fw`

  .. media-body:: Media heading

    Nulla vel metus scelerisque ante sollicitudin commodo.

Media heading

Cras sit amet nibh libero, in gravida nulla.

Media heading

Nulla vel metus scelerisque ante sollicitudin commodo.

Nested Lists¶

If a media item is a direct child of a media-list, it will be rendered with a ul instead of a div¶

.. media-list::

  .. media::

    .. media-left::

      .. image:: images/placeholder-50.jpg
        :target: http://google.com

    .. media-body:: Media Heading

      Nulla vel metus scelerisque ante sollicitudin commodo.

      .. media::

        .. media-left::

          .. image:: images/placeholder-50.jpg
            :target: http://google.com

        .. media-body:: Nested Media Heading

          Cras sit amet nibh libero, in gravida nulla.

  .. media::

    .. media-left::

      .. image:: images/placeholder-50.jpg
        :target: http://google.com

    .. media-body:: Media Heading

      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media Heading

Nulla vel metus scelerisque ante sollicitudin commodo.

Nested Media Heading

Cras sit amet nibh libero, in gravida nulla.
Media Heading

Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

https://getbootstrap.com/docs/3.3/javascript/#modals

Option List¶

.. modal::
    :name: <HTML ID>

    .. modal-header:: <Content>

    .. modal-body:: <Content>

      <Content>

    .. modal-footer::
      :close-class: [primary,success,info,warning,danger]
      :close-text: <Content> {# default: Close #}

Modal¶

.. button-primary:: Open modal
  :modal-target: modal-id-demo

.. modal::
  :name: modal-id-demo

  .. modal-header:: Modal title

  .. modal-body:: One fine body...

    and another fine one here.

  .. modal-footer::
    :close-class: primary

Prefix your modal names with #modal-{id} and open them with inline references¶

.. Prefix your modals with ``modal-{id}`` and we append the ``toggle`` and ``target`` attributes.

A paragraph with a `link which opens a modal <#modal-no-footer-demo>`_ with no footer.

.. button-primary:: Open the same modal with a button
  :modal-target: modal-no-footer-demo

.. modal::
  :name: modal-no-footer-demo

  .. modal-header:: Modal title

  .. modal-body:: A modal with no footer.

    .. code-block:: rest

        .. modal::
          :name: modal-no-footer

          .. modal-header:: Modal title

          .. modal-body:: Modal body

A paragraph with a link which opens a modal with no footer.

.. button-link:: Open modal-lg with body only
  :modal-target: modal-lg-body-demo

.. modal::
  :name: modal-lg-body-demo
  :lg:

  .. modal-body:: One fine body...

    and another fine one here, inside a ``.modal-lg``.

https://getbootstrap.com/docs/3.3/components/#panels

Optional CSS¶

.panel-body p:last-child {
    margin-bottom: 0;
}

Option List¶

.. panel:: <HeadingText>
  :class: <Class>
  :panel-title: <Flag> [Wrap heading in a panel-title]
  :name: <HTML ID>

  <Content>
  <Table>
  <List>

  .. panel-footer:: <FooterText>
    :class: <Class>

Panel Simple¶

.. panel::

  A default panel with no header or footer.

A default panel with no header or footer.

Panel Heading¶

.. panel:: :fa:`fw book tm`  Regular Panel Heading

  A default panel with a heading (**not inside** a ``.panel-title``).

Regular Panel Heading

A default panel with a heading (not inside a .panel-title).

Provide the :panel-title: flag to wrap the heading in a .panel-title¶

.. panel:: :fa:`fw book`  Panel Title
  :panel-title:

  A default panel with a heading (**inside** a ``.panel-title``).

Panel Title

A default panel with a heading (inside a .panel-title).

Panel Footer¶

.. panel::

  Body content

  .. panel-footer::
    :class: text-right text-muted

    **Note:** This is in the footer

Body content

Note: This is in the footer

Panel List¶

.. panel-success:: Panel List

  - `List 1 <https://google.com>`_
  - `List 2 <https://google.com>`_
  - `List 3 <https://google.com>`_

  This paragraph is rendered inside the ``.panel-body``, the list above is not.

Panel List

This paragraph is rendered inside the .panel-body, the list above is not.

Panel Table¶

.. panel-primary:: Panel Table
  :panel-title:

  This paragraph is rendered inside the ``.panel-body``, the table below is not.

  .. table::
    :class: table-bordered table-striped table-hover table-condensed
    :widths: auto
    :align: center

    =====  =====  =======
      x      y       z
    =====  =====  =======
      1      2       3
      1      3       4
      1      4       5
    =====  =====  =======

Panel Table

This paragraph is rendered inside the .panel-body, the table below is not.

x	y	z
1	2	3
1	3	4
1	4	5

Option List¶

.. progress-bar:: <IntegerValue> [25,25%]
  :class: <Class>
  :label: <Text> {# Text to display inside the progress bar #}
  :value: <IntegerValue> [25,25%]
  :min: <Integer> [0]
  :max: <Integer> [100]

Contextual¶

.. progress-bar:: 20
.. progress-bar-success:: 40
.. progress-bar-info:: 60
.. progress-bar-warning:: 80
.. progress-bar-danger:: 100%

Striped or Active¶

.. progress-bar-success:: 40
  :class: striped active
  :label: striped active

.. progress-bar-info:: 60
  :class: striped
  :label: striped

.. progress-bar-warning:: 80
  :class: striped
  :label: Striped

.. progress-bar-danger:: 100%
  :class: striped active
  :label: striped active

striped active

striped

Striped

striped active

Wrap multiple progress-bars in a progress-stack to stack them¶

.. progress-stack::

  .. progress-bar-info:: 25%
    :label: Step 1

  .. progress-bar-warning:: 25%
    :label: Step 2

  .. progress-bar-success:: 25%
    :label: Step 3

  .. progress-bar:: 25%
    :label: Step 4

Step 1

Step 2

Step 3

Step 4

“table-“ is automatically prepended for bootstrap classes¶

.. table:: Table caption
  :class: bordered striped hover condensed
  :widths: auto
  :align: left

  =====  =====  =======
    x      y       z
  =====  =====  =======
    1      2       3
    1      3       4
    1      4       5
  =====  =====  =======

Table caption¶
x	y	z
1	2	3
1	3	4
1	4	5

https://getbootstrap.com/docs/3.3/javascript/#tabs

Option List¶

.. tabs:: <Class>

  .. tab:: <TabTitle>

    <Content>

  .. tab:: <TabTitle>

    <Content>

Tabs with icons¶

.. tabs::
  :name: demo-tabs-1

  .. tab:: :fa:`book fw`  Tab #1

    .. note:: Content for tab #1.

  .. tab:: :fa:`user-o fw`  Tab #2

    .. hint:: Content for tab #2.

Tab #1
Tab #2

Note

Content for tab #1.

Hint

Content for tab #2.

Add some borders¶

.. css::

  .tab-content {
    border: 1px solid #ddd;
    border-top: none;
    padding: 10px;
  }

Badge¶

:badge:`42`

`Inbox <#>`_ :badge:`42`

42

Inbox 42

Labels¶

:label-default:`Default`

:label-primary:`Primary`

:label-success:`Success`

:label-info:`Info`

:label-warning:`Warning`

:label-danger:`Danger`

Default

Primary

Success

Info

Warning

Danger

Helper classes: http://getbootstrap.com/css/#helper-classes

:bg-primary:`Nullam id dolor id nibh ultricies vehicula ut id elit.`

:bg-success:`Duis mollis, est non commodo luctus, nisi erat porttitor ligula.`

:bg-info:`Maecenas sed diam eget risus varius blandit sit amet non magna.`

:bg-warning:`Etiam porta sem malesuada magna mollis euismod.`

:bg-danger:`Donec ullamcorper nulla non metus auctor fringilla.`

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Use the shortcuts to apply floats and colors
We collapse a space to the left or right if it exists (add an extra space if you want to include it)
The fa- in the class name is optional

Shortcut Classes

Shortcut	Expanded
pr	pull-right
pl	pull-left
tm	text-muted
tp	text-primary
ts	text-success
ti	text-info
tw	text-warning
td	text-danger

:fa:`rocket 4x`
:fa:`book 4x`
:fa:`user 4x`
:fa:`caret-right 4x`

:fa:`refresh 4x spin`
:fa:`refresh pulse 4x spin`
:fa:`spinner pulse 4x spin`

:h3:`:fa:`quote-left border\`  Some bold text  :fa:`quote-right border``

Some bold text

Note

These are rendered as <p class="h1"></p> tags, use restructuredText to manage your document headings. These can be used for decorative purposes.

:h1:`:fa:`book fw\` h1. Bootstrap heading :fa:`check text-success fw pr\``

:h2:`:fa:`book fw\` h2. Bootstrap heading`

:h3:`:fa:`book fw\` h3. Bootstrap heading`

:h4:`:fa:`book fw\` h4. Bootstrap heading`

:h5:`:fa:`book fw\` h5. Bootstrap heading`

:h6:`:fa:`book fw\` h6. Bootstrap heading :fa:`check text-success fw pr\``

..               ↑
.. ⚠️ You must escape the last back tick when using a role within a role

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Contextual¶

:text-muted:`Muted Text`

:text-primary:`Primary Text`

:text-success:`Success Text`

:text-info:`Info Text`

:text-warning:`Warning Text`

:text-danger:`Danger Text`

Muted Text

Primary Text

Success Text

Info Text

Warning Text

Danger Text

Inline Text¶

:kbd:`Ctrl + Alt + K`

:ins:`Some inserted text`

:mark:`Marked text`

:del:`Deleted text`

:strike:`Strikethrough text`

:underline:`Underlined text`

:var:`some variable`

:samp:`some sample text`

:sup:`Superscript`

:sub:`Subscript`

:abbr:`HTML <Hyper text markup language>`

Ctrl + Alt + K

Some inserted text

Marked text

~~Deleted text~~

~~Strikethrough text~~

Underlined text

some variable

some sample text

^Superscript

_Subscript

HTML

Alignment¶

:text-left:`Left aligned text`

:text-center:`Center aligned text`

:text-right:`Right aligned text`

:text-justify:`Justified aligned text`

:text-nowrap:`nowrap text`

Left aligned text

Center aligned text

Right aligned text

Justified aligned text

nowrap text

Transformation¶

:text-lowercase:`Lower Case Text`

:text-uppercase:`upper case text`

:text-capitalize:`capitalised text`

Lower Case Text

upper case text

capitalised text

Note

This is opt-in, You must initialize tooltip for yourself.

$('[data-toggle="tooltip"]').tooltip();

Text for a :tooltip-top:`tooltip-top <Demo Text>`, the end.

Text for a :tooltip-bottom:`tooltip-bottom <Demo Text>`, the end.

Text for a :tooltip-left:`:fa:`file-pdf-o\` tooltip-left <Demo Text>`, the end.

Text for a :tooltip-right:`:fa:`info\`  tooltip-right <Demo Text>`, the end.

Text for a tooltip-top, the end.

Text for a tooltip-bottom, the end.

Text for a tooltip-left, the end.

Text for a tooltip-right, the end.

Installation¶

Admonitions¶

Alerts¶

Buttons¶

Button Groups¶

Button Toolbar¶

Callout¶

Clearfix¶

Collapsible¶

Container¶

Jumbotron¶

Well¶

Page Header¶

Definition list¶

Grid¶

Columns¶

Push & Pull¶

Offset¶

Images¶

Lead Paragraph¶

Line Rule¶

Lists¶

Basic List Group¶

Linked Items¶

Contextual Items¶

Custom Content¶

Media Object¶

Alignment¶

Media Icons¶

Nested Lists¶

Modal¶

Modal¶

Panel¶

Panel Simple¶

Panel Heading¶

Panel Footer¶

Panel List¶

Panel Table¶

Progress Bar¶

Tables¶

Tabs¶

Badge & Labels¶

Inline Backgrounds¶

Font Awesome¶

Inline Heading¶

Text Helpers¶

Tooltips¶