bootstrap-grid-card
Are you looking for a way to get control over your lovelace layout on all your platforms with a small configuration footprint? Or maybe just a fan of bootstrap grid system? Then this card is for you.
I wanted a very specific layout on my wall-mounted tablet to fit everything I needed without having to scroll too much. When I had made that, the same layout became unusable on my phone and very non-optimal on my big PC screen. I did not want to maintain multiple views that basically provided the same things but with different layouts and I could not find any existing solution that was simple and enough customizable.
This card loads bootstrap-grid.css into lovelace and provides an easy way of configuring cards
with different bootstrap grid classes in yaml. With bootstrap, you can configure cards to take up
different size depending on screen size:
Installation
HACS (recommended)
This card is available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box.
This card should pop up if you search for "bootstrap-grid-card" in HACS. Remember adding the card to resources (described by HACS instructions while installing).
Manual install
-
Download and copy
bootstrap-grid-card.jsfrom latest release into<home-assistant>/wwwdirectory. Alternatively follow build instructions further down under "Development". -
Add card to resources in
<home-assistant>/configuration.yaml:lovelace: ... resources: ... - url: /local/bootstrap-grid-card.js type: module
Usage
If you don't know how to use bootstrap grid system, I strongly suggest you to read about it before continuing. This guide will assume the reader has basic knowledge of bootstrap grids.
Simple example configuration:
title: My view
panel: true # !!!!!
cards:
- type: "custom:bootstrap-grid-card"
cards:
- type: row
cards:
- type: button
class: "col-xs-12 col-md-6 col-xxl-3"
name: Button 1
- type: button
class: "col-xs-12 col-md-6 col-xxl-3"
name: Button 2
- type: button
class: "col-xs-12 col-md-6 col-xxl-3"
name: Button 3
- type: button
class: "col-xs-12 col-md-6 col-xxl-3"
name: Button 4
- type: row
class: "justify-content-center"
cards:
- type: entity
class: "col-xs-12 col-md-3 col-xxl-4"
entity: sun.sun
- type: weather-forecast
class: "col-xs-12 col-md-8 col-xxl-10"
entity: weather.homeNote:
panel: falseis not tested and probably not what you want.
The default bootstrap breakpoints are used. It is not possible to change these without recompiling the bootstrap sass files which is not supported in this card.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
)Options
# [Required, type: string]
type: custom:bootstrap-grid-card
# List of cards.
#
# [required, type: list]
cards:
# Class of the div that surrounds the grid.
#
# [optional, type: string, default: 'container-fluid']
class: "container-fluid"
# Use paddings and margins on rows and columns that looks like Lovelace default
# style. If set to *False*, you'll get whatever bootstrap uses as default.
#
# [optional, type: bool, default: True]
use_hass_style_gutter: True
# Custom space between cards. Only used if 'use_hass_style_gutter' is enabled.
#
# [optional, type: string, default: "4px"]
hass_style_gutter_size: "4px"
# Custom padding of the container (panel).
#
# [optional, type: string, default: Whatever bootstrap sets]
container_padding:
# String that will be appended to all rows class attribute.
#
# [optional, type: string, default: ""]
global_row_class: ""
# String that will be appended to all columns class attribute.
#
# [optional, type: string, default: ""]
global_col_class: ""Rows and columns
The bootstrap-grid-card provides two custom card types: row and col to be used in the cards
list of bootstrap-grid-card, row and col card.
The type: row and type: col card will wrap their cards list in a div with the row and col
class respectively.
A normal card (e.g. type: button) in the cards list of row or col, will always get the class
col*. So there is no need of adding a type: col around a single card.
Row options
# [required, type: string]
type: row
# Class attribute of this column. Will always have the 'row' class which can't
# be overridden.
#
# Example: "justify-content-center"
#
# [optional, type: string]
class:
# List of cards.
#
# [required, type: list]
cards:Column options
# [required, type: string]
type: col
# Class attribute of this column.
#
# Example: "col-xs-12 col-sm-5 col-md-4 col-lg-3"
#
# [optional, type: string]
class:
# List of cards.
#
# [required, type: list]
cards:Nesting rows and columns
It is possible to nest rows and columns any number of times as long there are no
non-bootstrap-grid-card´s in between. For example, it will not work if you put a row card in a
horizontal-stack card.
More advanced example:
# ...
- type: row
class: justify-content-md-center
cards:
- type: button
class: "col-12 col-sm-12 col-md-6 col-lg-5"
# ...
- type: button
class: "col-12 col-sm-12 col-md-3 col-lg-3"
# ...
- type: col # Nesting start
class: "col-12 col-sm-12 col-md-3 col-lg-3"
cards:
- type: row
cards:
- type: thermostat
# Use default class "col".
# ...
- type: markdown
# Use default class "col".
# ...
Development
# First time to install all deps
npm install
# Build card
npm run build
# Copy to home assistance www folder
cp dist/bootstrap-grid-card.js <home_assistant>/config/www/bootstrap-grid-card.js
# Add the .js file in resources described in the manual install instructions above.
# In lovelace UI: clear cache, reload resources and reload pageAlternatively follow instructions further down under "Development".