All Bootstrap Blocks

Descripción

Create Bootstrap 5 layouts directly in the WordPress editor. Plus choose from over 20 component blocks including carousels, modals, buttons and more.

The power of Bootstrap 5 in the WordPress editor

All Bootstrap Blocks is a free WordPress plugin for agencies, freelancers and hobbyists. Speeding up the delivery of WordPress websites by making the Bootstrap 5 framework available directly within the editor. Full documentation is available here.

Watch All Bootstrap Blocks in action.

Features

Examples

Quick and easy Bootstrap customisation

If you’re not a pro developer it can be difficult to customize Bootstrap for your needs. With All Bootstrap Blocks you can quickly and easily manage all of your Bootstrap options directly within the WordPress dashboard without writing a single line of code. Read the full documentation on customisations here.

Implement your own Bootstrap CSS and JS

If you’re plugging All Bootstrap Blocks into an existing site you may already have Bootstrap included in your theme. We’ve made it as easy as clicking a button to turn off our built in Bootstrap options to avoid duplication and give you the flexibility to use Bootstrap your way.

No code needed Bootstrap customisation

If you’d like to avoid code then we have built in the ability to manage all of your Bootstrap options within your WordPress admin. Fill in options by searching the available Bootstrap variables, inputting custom values or using a simple user interface. Bootstrap CSS and JS will automatically be included on your site customised with your options.

20 popular Google fonts to choose from

To make your life easier we have included the 20 most popular Google fonts for you to use within your site. Change the font used across your site in seconds. If you can’t find the font you’re looking for you can always add your own.

Fully responsive layout blocks with live preview

Utilise the Bootstrap grid system directly within the WordPress block editor. All layout blocks display a live preview and give you the power to use the built in Bootstrap utility settings and set specific settings for different size devices. Read the full documentation on layout blocks here.

Strip block

The strip block isn’t a standard in Bootstrap. It’s a block we find incredibly useful though. It’s a full width div that allows you to add a background (color, images and videos) along with an overlay, set height, padding and margin and insert any content you wish. This is the perfect block for creating full width banners or adding background to strips of content.

Container block

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. The All Bootstrap Blocks container block comes with the ability to choose between the default container (sets a max-width at each breakpoint), responsive containers (sets 100% width until the specified breakpoint) and a full width container (sets 100% width at all breakpoints).

Row block

Rows work as wrappers for columns. The row block makes it easy to set uniform column sizing for all inner columns such as vertical and horizontal alignment as well as specifying the number of columns to display per row. All of these settings can be managed for each breakpoint so you can have a completely different layout on mobile vs. desktop.

Column block

Columns work with the Bootstrap 12 column grid and make it possible to create simple or complex layouts that change based on the device size. The column block allows any inner content you wish and has quick settings to manage the horizontal and vertical alignment, offset and ordering of columns.

Column break block

Sometimes you’ll want to force columns to wrap on to a new line. The column break block was built for this. Add a column break to easily reset columns. You can also show or hide column breaks based on device size to provide full control over your layout.

Div block

Bootstrap has loads of useful utility classes to modify layouts however you want. We’ve created a basic <div> block that can hold any inner content you like and the ability to add additional classes to make use of the built in Bootstrap classes. If for any reason the Bootstrap layout components aren’t right for what you need, you can add a div block and customize it however you want.

20+ Bootstrap component blocks

We’ve created blocks for all of the Bootstrap components from accordions and modals to buttons and cards. All blocks preview directly in the block editor, work seamlessly with other WordPress blocks and have loads of options so you can tailor them to your needs. Read the full documentation on component blocks here.

Accordion block

Build vertically collapsing accordions, made up of a header and body. The accordion body can have whatever content you like from headings and paragraphs to images and videos. Control how accordions react to interactions and easily select whether to open an accordion item on page load.

Alert block

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Quickly style alerts by using theme colours, add a custom icon and even include a close button so that users can dismiss the message.

Breadcrumb block

Indicate the current page’s location within a navigational hierarchy. Add the breadcrumb block and we’ll automatically generate a breadcrumb for the current page. Customise your breadcrumbs with dividers.

Button block

Make use of all of Bootstraps predefined button styles with simple settings for changing colours and sizes. You can even add additional functionality to buttons like popovers, tooltips and dropdown menus.

Button group block

Group a series of buttons together on a single line or stack them in a vertical column. Quickly manage sizing of all buttons within the group.

Card block

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. All Bootstrap Blocks includes blocks for cards, card headers and card footers with full flexibility to add whatever content you like within them. Change the background, text colour and border colour of any card.

Card group block

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Carousel block

The All Bootstrap Blocks carousel block gives you the power to create a cycling slideshow with as many slides as you like. Each slide can include whatever content you want. Use the quick settings to change the theme and control whether arrows, indicators or both show. You can even set a custom interval for each slide.

Collapsible content block

The collapsible content block works with buttons and links to show or hide content to the user. You can include any content you want inside the collapsible content block including images, videos and anything else.

List group block

List groups are a flexible and powerful component for displaying a series of content. Each list item can be styled using the theme colours, turned into hyperlinks, marked as active and marked as disabled.

Modal block

Add dialogs to your page and toggle them with links and buttons. Each modal can have a header, footer and body. Each of which can include any content you like. Control the position of the modal, whether it’s scrollable and whether the backdrop should be clickable.

Navs & tabs block

Quickly create navigations within your page using the navs & tabs block. Choose a style for your navigation from Default, Tabs and Pills. Mark each navigation item as active or disabled and specify layout options for each breakpoint.

Offcanvas block

Build hidden sidebars into your project for navigation, shopping carts, and more. Toggle offcanvas blocks with links and buttons to display whatever content you like. Choose the offcanvas placement (from top, right, bottom and left), specify whether there should be a backdrop and whether the body should be scrollable.

Progress bar block

Add progress bars directly in your page and use your own JS to control them. You can quickly style progress bars with theme colours, add labels, include stripes and even animate them.

Spinner block

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Quickly customise spinner styles, colours and sizes directly in the editor.

Toast block

Toasts are lightweight notifications designed to mimic the push notifications that have been popularised by mobile and desktop operating systems. Toggle toasts with links and buttons. Customise the header, content, colour and placement of toasts on a page.

Capturas

  • Automatically include Bootstrap or include your own version
  • Manage all of your Bootstrap settings in the dashboard
  • Create responsive layouts directly in the editor
  • Choose from over 20 component blocks (Carousels)
  • Choose from over 20 component blocks (Modals)
  • Choose from over 20 component blocks (Accordions)

Bloques

Este plugin proporciona 37 bloques.

  • Toast Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
  • Spinner Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
  • Row Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows.
  • Card Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
  • Breadcrumb Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
  • Nav and Tabs Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
  • Button Group Group a series of buttons together on a single line or stack them in a vertical column.
  • Progress Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
  • Div The Div block creates a <div> element with the ability to add whatever classes you want. This is great for building more complex custom layouts that utilise utility and helper classes provided by Bootstrap.
  • Alert Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
  • Card Group Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
  • Column Modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
  • Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
  • Container Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
  • Strip Full width strip allowing background colours, images and videos.
  • Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
  • Carousel A slideshow component for cycling through elements—images or slides of text—like a carousel.
  • Button Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
  • Column Break Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.
  • Accordion Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
  • Collapse The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
  • List Group List groups are a flexible and powerful component for displaying a series of content.
  • Toast Header Add an optional header within an toast.
  • Modal Footer Add an optional footer within a modal.
  • Nav & Tab Item Add multiple items to your nav.
  • List Group Item Add list group items to a list group. If a URL is set then the item will be an <a> tag otherwise it will be a <div>.
  • Card body The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
  • Modal body The building block of a modal is the .modal-body. Use it whenever you need a padded section within a modal.
  • Modal Header Add an optional header within a modal.
  • Offcanvas Header Add an optional header within an offcanvas.
  • Offcanvas body The building block of an offcanvas is the .offcanvas-body. Use it whenever you need a padded section within a offcanvas.
  • Card Header Add an optional header within a card.
  • Toast body The building block of a toast is the .toast-body. Use it whenever you need a padded section within a toast.
  • Dropdown Item Add as many dropdown items to a dropdown as you would like. Add an <a> tag with a Link. Add a header to label sections of actions in any dropdown menu. Separate groups of related menu items with a divider. Place any freeform text within a dropdown menu with text.
  • Carousel Item Add as many carousel items to a carousel as you wish. Each carousel item can have different layouts and content.
  • Accordion Item Add individual accordion items within an accordion.
  • Card Footer Add an optional footer within a card.

Instalación

  1. Upload the all-bootstrap-blocks directory into the /wp-content/plugins/ directory
  2. Activate the plugin through the Plugins menu in WordPress
  3. Start adding blocks

Preguntas frecuentes

Which versions of Bootstrap are supported?

All Bootstrap Blocks supports Bootstrap version 5.

Is Bootstrap included?

Bootstrap is included. However you have the ability to switch this off in your WordPress dashboard if you would like to include your own version of Bootstrap. Read the documentation here.

Do you want to suggest a feature or report a bug?

Please add any feature requests or bugs within the support section.

Reseñas

16 de noviembre de 2021
Thanks for this plugin. I built some custom blocks with ACF, but that's a plugin I needed for my Bootstrap site 🙂 Keep up the good work!
Leer la 1 reseña

Colaboradores y desarrolladores

«All Bootstrap Blocks» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

Traduce «All Bootstrap Blocks» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.