Welcome to dj-bootstrap-components’s documentation!¶
Installing¶
Getting Started¶
Components¶
this
Alerts¶
It is important to reference the bootstrap documentation for how alerts work. This is how to include alerts in your code
Examples¶
Add any one of the the following in your code, to show an alert
{% include 'bootstrap_components/alert.html' with content='<strong> bold </strong> sample text' color='primary' %}
{% include 'bootstrap_components/alert.html' with content='sample alert text' color='danger' %}
{% include 'bootstrap_components/alert.html' with heading='sample heading' content='sample alert text' color='warning' dismiss=1%}
{% include 'bootstrap_components/alert.html' with heading='sample heading' heading_size=1 content='sample alert text' color='success' dismiss=1%}
Which look like this:¶
demo
Arguments¶
- Required: content
- the content of the alert. Keep in mind that this string can be html for additional formatting
- string
- Required: color
- accepts bootstrap colors like: primary, success, danger, etc.
- string
- heading
- creates a
<h4>heading by default in the alert - string
- creates a
- heading_size
- overrides
<h4>default, allows 1-6 - int
- overrides
- dismiss
- allows alert to be dismissible, requires bootstrap js
- bool (Enter ‘True’ or 1)
Badges¶
It is important to reference the bootstrap documentation for how alerts work. This is how to include badges in your code
Examples¶
Add any one of the the following in your code, to show an alert
<h4>Heading 4 {% include 'bootstrap_components/badge.html' with content="badge-text" color='success'%} </h4>
<h4>Heading 4 {% include 'bootstrap_components/badge.html' with content="link-badge-text" color='warning' href='www.example.com'%} </h4>
<h4>Heading 4 {% include 'bootstrap_components/badge.html' with content="pill-badge-with-link" href='www.example.com' pill=True%} </h4>
for reference:
{% include 'bootstrap_components/badge.html' with content="small-badge" %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='warning'%}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='danger' %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='success' %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='info' %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='secondary' %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='light' %}
{% include 'bootstrap_components/badge.html' with content="small-badge" color='dark' %}
Which look like this:¶
demo
Arguments¶
- Required: content
- adds text in the middle of the badge
- string
- color
- default: ‘primary’
- accepts bootstrap colors like: primary, success, danger, etc.
- string
- pill
- accepts ‘True’ or 1; allows for more rounded borders
- bool
- href
- allows the badge to be a link, enable hover and actionable properties
- accepts href property
- string
Breadcrumbs¶
It is important to refrence the bootstrap documentation for how alerts work. This is how to include breadcrumbs in your code
Note: This component requires you to send data to the template from context¶
Examples¶
Add any one of the the following in your code, to show an alert
{% include 'bootstrap_components/breadcrumb.html' with crumbs=crumbs_from_context %}
{% include 'bootstrap_components/breadcrumb.html' with crumbs=crumbs_from_context separator=">" %}
{% include 'bootstrap_components/breadcrumb.html' with crumbs=crumbs_from_context separator="|" active_crumb=1 %}
Here is an example of what the crumbs context should look like:
CRUMBS = (('home', reverse('index')),
('blog', reverse('blog:posts')),
('post', reverse('blog:post', args=[post_id]))
)
Which look like this:¶
breadcrumbs-demo
Arguments¶
- Required: content
- adds text in the middle of the badge
- string
- seperator
- Changes the separator between elements; default:
/ - accepts any normal character and the following symbols:
<, >, |
- string
- Changes the separator between elements; default:
- Required: crumbs
- Accepts a tuple or list from context that has the structure
[(<breadcrumb-text>, <breadcrumb-link>), ...] - tuple or list
- Accepts a tuple or list from context that has the structure
- active_crumb
- Enter the index number starting from zero of which breadcrumb is active, by default it is the last one
- int
Cards¶
It is important to reference the bootstrap documentation for how alerts work. This is how to include cards in your code
Alert: This component may require you to send data to the template from context¶
Description¶
Cards in bootstrap are highly customizable and very extensible. Thus, we do not support all the different variations of a card, rather a ‘one-size-fits-all’ template. If this is not what works for you we recommend manually adding cards.
The included elements in the card are, in order from top to bottom: an image, a header with a title and a subtitle, some text, a list-group, a footer with two buttons. Like the following:
card-explainer
Obviously, you need not enable each element, pick and choose what you want.
Use Case¶
To understand why we have done things a certain way understanding the expected use case may help. We expect that cards will generally be looped over to show a collection of content like on a storefront displaying its products. Take a look at bootstrap card layout documentation to get a better idea on how to display your cards.
Examples¶
Add any one of the the following in your code, to show an alert
{% include 'bootstrap_components/card.html' with title='sample card title' subtitle='smaller text here' text='short description of what this is about' size_utilities="w-25" button1_text='click here' button2_text='no click here!' %}
Which look like this:¶
cards-demo
Arguments¶
- image_src
- Accepts a string of the image url, if you want to add a static image use a context manager in your template to do so. i.e.
{% with static '//img.png' as img %} {% include 'bootstrap_components/card.html' image_src=img %}
- Accepts a string of the image url, if you want to add a static image use a context manager in your template to do so. i.e.
- title
- Required
- Accepts a string (can use html like
<strong>) - string
- subtitle
- Accepts a string (can use html like
<strong>) - string
- Accepts a string (can use html like
- text
- Short text that appears after the title
- string
- list_group
- accepts a list of objects from the view
- Requires the following fields: list_group_display_field
- list or iterable like QuerySet
- list_group_display_field
- the field of the object that is iterated on passed in list_group
- string
- button1_text
- text for the first button in the footer
- string
- button2_text
- text for the second button in the footer
- string
- button1_url
- link for the first button, use of reverse recommended if linking to page on site
- string
- button2_url
- link for the second button, use of reverse recommended if linking to page on site
- string
- background
- accepts colors like primary, secondary, success, transparent, etc.
- string
- border
- accepts colors like primary, secondary, success, transparent, etc.
- string
- color
- accepts colors like primary, secondary, success, transparent, etc.
- string
- size_utilities
- use w-50, or h-100, or other utilities for sizing
- string