Freemius

Abu Hayat

bPlugins

shehabulislam

btechnologies

Farazi Forhad

<p><strong>Create responsive sliders for images, posts, WooCommerce products, and videos with multiple layouts, animations, and customization options in WordPress. Design and display carousels, grids, and thumbnail sliders directly in the block editor with simple block and shortcode support.</strong></p>
<p><a href="https://bplugins.com/products/b-slider/" rel="nofollow ugc">bSlider</a> | <a href="https://bplugins.com/docs/b-slider" rel="nofollow ugc">Documentation</a> | <a href="https://bplugins.com/products/b-slider/pricing/" rel="nofollow ugc">Pricing</a> | <a href="https://bplugins.com/support/" rel="nofollow ugc">Support</a> | <a href="https://bplugins.com/products/b-slider/#demos" rel="nofollow ugc">Demo</a></p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/DOvUG5ArWHE?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p><a href="https://bplugins.com/products/b-slider/" rel="nofollow ugc">bSlider</a> makes it easy to build engaging sliders without coding. Choose from smooth transitions like fade, slide, or flip, and customize titles, buttons, indicators, and arrows. Add slides quickly, reorder them with drag-and-drop, and adjust settings per device for fully responsive layouts.</p>
<p>You can use bSlider for product showcases, portfolios, testimonials, or hero sections. It works with any WordPress theme. You can add sliders using the Gutenberg block or place them anywhere with a shortcode.</p>
<h3>Key Features –  Free Version</h3>
<ul>
<li><strong>Shortcode Support</strong> – Insert sliders anywhere on your site, even outside Gutenberg, using shortcodes.</li>
<li><strong>Unlimited Slides</strong>: Create as many slides as you need for products, portfolios, or content highlights.</li>
<li><strong>Easy Slide Management</strong>: Quickly duplicate or remove slides for faster editing and organization.</li>
<li><strong>Customizable Content Styles</strong>: Style titles and descriptions with flexible typography and design controls.</li>
<li><strong>Navigation Buttons</strong>: Add left and right arrows with customizable size, color, and border radius.</li>
<li><strong>Slide Indicators</strong>: Choose from different styles and positions to help users navigate easily.</li>
<li><strong>Autoplay Controls</strong>: Turn autoplay on or off, set custom duration, and adjust timing per slide.</li>
<li><strong>Hover Pause</strong>: Pause the slider when users hover, improving interactivity and focus.</li>
<li><strong>Overlay Colors</strong>: Add color overlays on slides for better contrast and text visibility.</li>
<li><strong>Slide Animations</strong>: Apply smooth transitions like fade, slide, or flip to catch attention.</li>
<li><strong>Content Positioning</strong>: Align text and elements at the default or middle area of the slide.</li>
<li><strong>Arrow Styling</strong>: Customize arrow size, height, width, border, and color to match your theme.</li>
<li><strong>Carousel Layout</strong>: Create looping, autoplay carousels with horizontal or vertical direction.</li>
<li><strong>Grid Layout</strong>: Display sliders in responsive grids with adjustable column and row gaps.</li>
<li><strong>Thumbnails Layout</strong>: Add thumbnail navigation with overlay, autoplay, and border options.</li>
<li><strong>Post Slider Options</strong>: Query posts by category or tag, show excerpts, and limit content length.</li>
<li><strong>WooCommerce Slider</strong>: Highlight products with content length and excerpt display controls.</li>
<li><strong>Video Slider Options</strong>: Enable popup playback with repeat, mute, autoplay, reset, or hide controls.</li>
<li><strong>Basic Video Controls</strong>: Show a large play button and restart option for easier interaction.</li>
<li><strong>Gutenberg Block</strong>: Add sliders directly in the block editor with full customization.</li>
<li><strong>Custom Slider Height</strong>: Easily define and set the perfect height for your sliders.</li>
<li><strong>Dynamic Indicators</strong>: Fully customize indicator types, positioning, and direction (Horizontal or Vertical).</li>
<li><strong>Carousel Enhancements</strong>: Toggle visibility for Navigation Arrows and Pagination Indicators with a single click.</li>
<li><strong>Grid Flexibility</strong>: Set items per page and choose your preferred pagination style (Standard Button or Load More).</li>
<li><strong>Post Per Page</strong>: Control the exact density of your content.</li>
<li><strong>Advanced Sorting</strong>: Organize content by specific criteria (Order By) and direction (ASC/DESC).</li>
<li><strong>Post Offset</strong>: Skip specific posts to create unique layouts and avoid duplication.</li>
<li><strong>Playback Settings</strong>: New options for Auto-play, Loop/Repeat, and Muted starts.</li>
<li><strong>Comprehensive Player Controls</strong>: Empower users with a full suite of controls including Play/Pause, Mute, Rewind/Fast-Forward, and real-time displays for Progress, Current Time, and Duration.</li>
</ul>
<h3>bSlider Pro – Unlock Premium Features</h3>
<p><a href="https://bplugins.com/products/b-slider/pricing/" rel="nofollow ugc">bSlider Pro</a> gives you more design power and control. Add advanced effects, flexible layouts, and interactive options to create engaging, professional sliders.</p>
<h3>What’s New in the Pro Version?</h3>
<ul>
<li><strong>Custom HTML Wrapper Tags</strong>: Options to use specific tags like h1-h6 for better structure and SEO.</li>
<li><strong>Slider Transition Effects</strong>: Professional animation effects for seamless slide transitions.</li>
<li><strong>Left/Right Inner Gap</strong>: Customizable internal spacing between slider items.</li>
<li><strong>Dual Slide Direction</strong>: Support for both horizontal and vertical movement paths.</li>
<li><strong>Custom Arrow Styles</strong>: Unique navigation arrow designs to match your branding.</li>
<li><strong>Slide on Mouse Wheel</strong>: Ability to navigate through slides using the mouse scroll wheel.</li>
<li><strong>Arrow Follow Mouse</strong>: Interactive navigation arrows that dynamically follow the cursor.</li>
<li><strong>Slide on Mouse Drag</strong>: Smooth drag-to-slide functionality for a tactile user experience.</li>
<li><strong>Lazy Load Enable</strong>: Optimizes performance by deferring the loading of offscreen images.</li>
<li><strong>Move From Edge</strong>: Precise control over the spacing of content from the slider edges.</li>
<li><strong>Video Reset On End</strong>: Automatically restarts videos from the beginning once they finish.</li>
<li><strong>Video Auto Hide Controls</strong>: Automatically hides playback UI during periods of inactivity.</li>
<li><strong>Advanced Video Tools</strong>: Includes Mute, PIP (Picture-in-Picture), AirPlay, Download, and Fullscreen.</li>
<li><strong>Pagination Position</strong>: Flexible alignment for pagination buttons within grid layouts.</li>
<li><strong>Include/Exclude Posts & Products</strong>: Manually select exactly which items to display or hide.</li>
<li><strong>Exclude Current Post</strong>: Prevents the post being currently viewed from appearing in the feed.</li>
<li><strong>Grab Cursor Interaction</strong>: Displays a “grab” icon to improve carousel usability.</li>
<li><strong>Thumbnail Direction & Navigation</strong>: Controls for thumbnail flow and dedicated navigation arrows.</li>
<li><strong>Thumbnail Styling</strong>: Custom settings for thumbnail position, dimensions, borders, and color overlays.</li>
<li><strong>Box Model Controls</strong>: Full management of Margin, Padding, Border, and Border Radius.</li>
<li><strong>Advanced Typography</strong>: Comprehensive styling for fonts, sizes, and text behavior.</li>
<li><strong>Interactive Color States</strong>: Set specific colors for both standard and hover states.</li>
<li><strong>Animation Timing</strong>: Granular control over animation duration and start delays.</li>
<li><strong>Clickable CTA Buttons</strong>: Add custom button labels and URLs directly into slide content.</li>
<li><strong>Smart Link Behavior</strong>: Option to open button links in a new browser tab automatically.</li>
<li><strong>Advanced Carousel Styles</strong>: Create unique carousels with ticker, grid, and 3D effects.</li>
</ul>
<p><a href="https://bplugins.com/products/b-slider/pricing/" rel="nofollow ugc">Upgrade to Pro</a> to unlock all premium features.</p>
<h3>How to Use bSlider – Quick Start Guide</h3>
<p>Getting started is easy!</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/qgSBHjGdegg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>Follow these steps:</p>
<h3>Step-by-Step Setup</h3>
<ol>
<li>Go to <strong>Plugins <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong>.</li>
<li>Search for <strong>bSlider</strong>.</li>
<li>Click <strong>Install Now</strong>, then <strong>Activate</strong>.</li>
<li>In the block editor, add the <strong>bSlider block</strong>, choose a slider type and layout, configure settings, and publish.</li>
<li>Or insert the provided <strong>shortcode</strong> anywhere to show your slider.</li>
</ol>
<p>Enjoy smooth, responsive sliders on your site!</p>
<p><a href="https://bplugins.com/products/b-slider/#demos" rel="nofollow ugc">Live Demo</a> | <a href="https://bplugins.com/products/b-slider/pricing/" rel="nofollow ugc">Try the Pro Version</a></p>
<ul>
<li>For installation help click on Installation Tab</li>
</ul>
<h3>User Feedback</h3>
<h4>⭐⭐⭐⭐⭐ <a href="https://wordpress.org/support/topic/super-easy-to-use-and-responsive-support/" rel="ugc">Super easy to use, and responsive support</a></h4>
<p>❛❛<strong><em>Been very happy with our pro purchase. Did have a few issues, but the developer is very responsive and supports this plugin well.!</em></strong>❜❜</p>
<p><strong><em>–<a href="https://wordpress.org/support/users/sboutsource/" rel="ugc">sboutsource</a></em></strong></p>
<h4>⭐⭐⭐⭐⭐ <a href="https://wordpress.org/support/topic/just-what-i-needed-1237/" rel="ugc">Just what I needed</a></h4>
<p>❛❛<strong><em>Even better than some premium blocks!</em></strong>❜❜</p>
<p><strong><em>–<a href="https://wordpress.org/support/users/stlcodescape/" rel="ugc">stlcodescape</a></em></strong></p>
<h4>⭐⭐⭐⭐⭐ <a href="https://wordpress.org/support/topic/easy-to-use-page-image-dynamic-text-configuration-plug-in/" rel="ugc">easy-to-use page image + dynamic text configuration plug-in</a></h4>
<p>❛❛<strong><em>Hello:</em></strong></p>
<p><strong><em>Gutenberg’s simple and easy-to-use page image + dynamic text configuration plug-in look terrific!</em></strong></p>
<p><strong><em>Thank you!</em></strong>❜❜</p>
<p><strong><em>–<a href="https://wordpress.org/support/users/hlv008/" rel="ugc">hlv356168</a></em></strong></p>
<h4>⭐⭐⭐⭐⭐ <a href="https://wordpress.org/support/topic/excelente-plugin-1255/" rel="ugc">Excelente plugin</a></h4>
<p>❛❛<strong><em>Very easy to use!</em></strong>❜❜</p>
<p><strong><em>–<a href="https://wordpress.org/support/users/jsdeoleo/" rel="ugc">jsdeoleo</a></em></strong></p>
<h4>– Did you like this plugin? Dislike it? Have a feature request? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Please share your feedback with us</a></h4>
<h3>Check out our other WordPress Plugins</h3>
<ul>
<li><a href="https://bplugins.com/products/html5-audio-player/" rel="nofollow ugc">HTML5 Audio Player</a> – Best audio player plugin for WordPress.</li>
<li><a href="https://bplugins.com/products/pdf-poster/" rel="nofollow ugc">PDF Poster</a> – A fully-featured PDF Viewer Plugin for WordPress.</li>
<li><a href="https://bplugins.com/products/streamcast-radio-player/" rel="nofollow ugc">StreamCast</a> – A fully-featured Radio Player Plugin for WordPress.</li>
<li><a href="https://bplugins.com/products/3d-viewer/" rel="nofollow ugc">3D Viewer</a> – Display interactive 3D models on the webs.</li>
</ul>
<h3>Source Code</h3>
<p>You can find the source code, report bugs, and contribute to the development of this plugin on our GitHub repository:<br />
<a href="https://github.com/bPlugins/bslider-free" rel="nofollow ugc"><strong>BSlider on GitHub</strong></a></p>
<h3>Third-Party Libraries</h3>
<p>This plugin bundles the following third-party JavaScript/PHP libraries.</p>
<h4>Bootstrap</h4>
<ul>
<li><strong>Source:</strong> https://getbootstrap.com/</li>
<li><strong>GitHub:</strong> https://github.com/twbs/bootstrap</li>
<li><strong>License:</strong> MIT – https://github.com/twbs/bootstrap/blob/main/LICENSE</li>
<li><strong>Purpose:</strong> Provides responsive carousel/slider functionality, grid layout, and UI components used in the slider interface.</li>
</ul>
<h4>Plyr</h4>
<ul>
<li><strong>Source:</strong> https://plyr.io/</li>
<li><strong>GitHub:</strong> https://github.com/sampotts/plyr</li>
<li><strong>License:</strong> MIT – https://github.com/sampotts/plyr/blob/master/LICENSE.md</li>
<li><strong>Purpose:</strong> A simple, accessible HTML5 media player used for video slide playback with customizable controls.</li>
</ul>
<h4>LazyLoad</h4>
<ul>
<li><strong>Source:</strong> https://github.com/verlok/vanilla-lazyload</li>
<li><strong>GitHub:</strong> https://github.com/verlok/vanilla-lazyload</li>
<li><strong>License:</strong> MIT – https://github.com/verlok/vanilla-lazyload/blob/master/LICENSE</li>
<li><strong>Purpose:</strong> Enables lazy loading of slide images to improve page performance by deferring off-screen image loading.</li>
</ul>
<h4>Font Awesome</h4>
<ul>
<li><strong>Source:</strong> https://fontawesome.com/</li>
<li><strong>GitHub:</strong> https://github.com/FortAwesome/Font-Awesome</li>
<li><strong>License:</strong> SIL OFL 1.1 (Fonts), MIT (CSS) – https://fontawesome.com/license/free</li>
<li><strong>Purpose:</strong> Provides scalable vector icons used for slider navigation arrows and UI elements.</li>
</ul>
<h4>bpl-tools</h4>
<ul>
<li>Source / GitHub: https://github.com/bPlugins/bpl-tools</li>
<li>License: GPL-2.0-or-later – https://www.gnu.org/licenses/gpl-2.0.html</li>
<li>Purpose: Shared utility library providing admin dashboard components and common Gutenberg editor controls.</li>
<li>External Services: The library may connect to bPlugins, WordPress.org, and Freemius services for product data and checkout functionality. See full details: https://github.com/bPlugins/bpl-tools#external-requests–why-they-are-made</li>
</ul>
<h4>Freemius Lite SDK</h4>
<ul>
<li><strong>Source:</strong> <a href="https://bplugins.com/" rel="nofollow ugc">https://bplugins.com/</a></li>
<li><strong>GitHub:</strong> <a href="https://github.com/bPlugins/freemius-lite-sdk" rel="nofollow ugc">https://github.com/bPlugins/freemius-lite-sdk</a></li>
<li><strong>License:</strong> GPL-2.0-or-later – <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-2.0.html</a></li>
<li><strong>Purpose:</strong> Provides an opt-in consent form for usage tracking and analytics to help improve the plugin. No data is sent before explicit user consent.</li>
<li><strong>External Services:</strong> Communicates with <code>api.bplugins.com</code> (activation events) and <code>wp.freemius.com</code> (opt-in processing) only after user opt-in. See <a href="https://bplugins.com/privacy-policy" rel="nofollow ugc">bPlugins Privacy Policy</a> and <a href="https://freemius.com/privacy/" rel="nofollow ugc">Freemius Privacy Policy</a>.</li>
</ul>
<h4>External Link (Placeholder Image)</h4>
<ul>
<li><strong>Source:</strong> https://bblockswp.com/wp-content/demo/img/green-hill.jpg</li>
<li><strong>Source:</strong> https://templates.bplugins.com/wp-content/uploads/2025/02/n-39.jpg</li>
<li><strong>Source:</strong> https://templates.bplugins.com/wp-content/uploads/2025/02/n-37.jpg</li>
<li><strong>Purpose:</strong> This image is hosted on our own server and is strictly used as a fallback/dummy placeholder in the editor preview when a user has not yet selected or uploaded their own image content. It is not loaded on the frontend for site visitors.</li>
</ul>


bSlider – Create Responsive Image, Post, Product, and Video Sliders

bSlider is a WordPress slider plugin that lets you create responsive image, post, product, and video carousels using the Gutenberg block & shortcode.

Felix Arntz

gidomanders

<p>Bootstrap for Contact Form 7 modifies all the output of the popular <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7 plugin</a> to be fully compatible with the current version 3 of the popular CSS framework <a href="http://getbootstrap.com/" rel="nofollow ugc">Bootstrap</a>. What this means to you as a Bootstrap user: No additional CSS rules necessary – from now on, Contact Form 7 integrates seamlessly with the overall Bootstrap design. It is even possible to use different form layouts via Contact Form 7’s “Additional Settings” tab.</p>
<blockquote>
<p><strong>This plugin is an addon to Contact Form 7.</strong><br />
  The plugin requires Contact Form 7 to be activated, otherwise it won’t change anything. Furthermore you should be using it in conjunction with a Bootstrap-based WordPress theme, otherwise the forms might look weird (and there would be no point in using this addon anyway).</p>
</blockquote>
<h4>Usage</h4>
<p>Bootstrap for Contact Form 7 does not provide additional options itself, so you can continue using Contact Form 7 (almost) the same way you did before.</p>
<p>The plugin will not break your form’s appearance, however it is recommended to adjust the contact form shortcodes to achieve perfect results: Generally, you should not be using HTML tags any longer to wrap the field shortcodes. They already include the complete Bootstrap-ready markup, including displaying labels. Read the <a href="https://wordpress.org/plugins/bootstrap-for-contact-form-7/installation/" rel="ugc">Setup Guide</a> for a quick introduction.</p>
<h4>Advanced Features</h4>
<p>The plugin brings some additional useful features to enhance your forms even more:</p>
<ul>
<li>the form layout can be changed to a horizontal or inline one</li>
<li>the form’s input size can be globally changed</li>
<li>checkbox and radio groups can be displayed either one per line, inline or as Bootstrap buttons</li>
<li>text inputs and textareas support Bootstrap’s input group feature to add content before or after them</li>
<li>text inputs and textareas can show a character count (the [count] shortcode from Contact Form 7) inline</li>
<li>the captcha input field can show the captcha image inline</li>
<li>by using GET parameters in a URL to a contact form, field values can be predefined</li>
</ul>
<p>The above features are explained in detail on the <a href="https://wordpress.org/plugins/bootstrap-for-contact-form-7/other_notes/" rel="ugc">Other Notes</a> page.</p>
<h4>Basic Idea behind the Plugin</h4>
<p>Lots of WordPress Themes are based on Bootstrap – and while it is the general approach to use CSS rules to style your HTML content, it is also possible the other way around – with many benefits.</p>
<p>When using a well-known framework which provides general styles for all the important components of a website, it can be time-consuming to apply the same styles to third-party plugins which (obviously) have not been written with a framework in mind. This is perfectly fine, but if you’re using Bootstrap for your WordPress theme, you will certainly love the fact that you do not need to write CSS rules for the Contact Form 7 plugin any longer. It will all look like Bootstrap from the beginning so that it fits into your website design. If you’re not using Bootstrap, this plugin is useless for you – but maybe you’re just having an idea how you can adjust another popular WordPress plugin to integrate with another well-written CSS framework.</p>
<h3>Advanced Features</h3>
<h4>Additional Settings</h4>
<blockquote>
<p>Here you find additional settings which are part of the Bootstrap for Contact Form 7 plugin. If you want to learn more about the additional settings of the original Contact Form 7 plugin, please visit <a href="http://contactform7.com/additional-settings/" rel="nofollow ugc">this page</a>.</p>
</blockquote>
<p>You can adjust several form properties (properties that affect an entire form, not just a single field of it) to give your forms the appearance you want. Here is a list of the properties, what they do and their possible values:</p>
<ul>
<li><code>layout</code> – adjusts the form’s layout (note that in most cases the inline form will need additional styling to look good); valid values: ‘default’, ‘inline’, ‘horizontal’; default value: ‘default’</li>
<li><code>size</code> – adjusts the size of all input fields; valid values: ‘default’, ‘small’, ‘large’; default value: ‘default’</li>
<li><code>group_layout</code> – adjusts the layout of checkbox and radio groups; valid values: ‘default’, ‘inline’, ‘buttons’; default value: ‘default’</li>
<li><code>group_type</code> – adjusts the color of checkbox and radio groups with buttons layout; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘default’</li>
<li><code>submit_size</code> – adjusts the size of the submit button; valid values: ‘default’, ‘small’, ‘large’ or an empty string to force it to have the size defined in the <code>size</code> form property; default value is an empty string</li>
<li><code>submit_type</code> – adjusts the color of the submit button; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘primary’</li>
<li><code>required_html</code> – adjusts the HTML output to append to required fields’ labels; valid values: any HTML output; default value: <code><span class="required">*</span></code></li>
<li><code>grid_columns</code> – allows you to override the total grid column count of Bootstrap (you might only need to adjust this if you’re using a custom version of Bootstrap); valid values: any integer greater than 1; default value: 12</li>
<li><code>label_width</code> – adjusts the form’s label width (applies only to horizontal layout); valid values: any integer between 1 and the value of <code>grid_columns</code> minus 1; default value: 3</li>
<li><code>breakpoint</code> – adjusts the responsive breakpoint (applies only to horizontal layout); valid values: ‘xs’, ‘sm’, ‘md’, ‘lg’; default value: ‘sm’</li>
</ul>
<p>There are four methods to adjust the above properties: The easiest one is to use the “Additional Settings” tab when editing a form in Contact Form 7 and insert any property and its desired value there, one per line. For example:</p>
<pre><code>layout:horizontal
size:large
group_layout:inline
</code></pre>
<p>Alternatively you can use the filter <code>cf7bs_form_{{FORM_ID}}_properties</code> where <code>{{FORM_ID}}</code> must be replaced by the ID of the form you would like to modify (you find that number in the overall form’s shortcode). An array of all the properties and their values is passed to that function so that you can easily adjust them. Example (in this case we would adjust the contact form with the ID 3):</p>
<pre><code>function my_custom_form_properties( $properties ) {
    $properties['layout'] = 'horizontal';
    $properties['size'] = 'large';
    $properties['group_layout'] = 'inline';
    return $properties;
}
add_filter( 'cf7bs_form_3_properties', 'my_custom_form_properties' );
</code></pre>
<p>The third way does something slightly different from the other two since it does not change a specific form’s properties, but the default properties for all forms. To do that, you should use the filter <code>cf7bs_default_form_properties</code> which works exactly like the other filter mentioned above.</p>
<p>The fourth method is different from the others as it allows to override the form settings on a per-field basis. You can add any of the setting names plus its intended value as a shortcode attribute for any field to make this field behave differently from the form’s setting. This can be especially helpful if you need to create advanced form layouts like when you need multiple fields on the same line. For example, you could do the following to display two fields in one row, even though the form’s <code>layout</code> is set to ‘default’:</p>
<pre><code><div class="form-group row">
    <div class="col-md-6"><label for="user-first-name">First Name</label>[text user_first_name id:user-first-name layout:none][/text]</div>
    <div class="col-md-6"><label for="user-last-name">Last Name</label>[text user_last_name id:user-last-name layout:none][/text]</div>
</div>
</code></pre>
<p>Note that the custom form filter takes precedence over the properties defined in the admin, while the default filter is just used as fallback.</p>
<h4>Input Groups</h4>
<p>All textual input fields support the input group feature that Bootstrap provides. To use it, add a shortcode-like construct (almost, but it has to use curly braces instead) into the content of any text / email / url / tel input shortcode. Example:</p>
<pre><code>[text twitter-username]{input_before}@{/input_before}Your Twitter Handle[/text]
</code></pre>
<p>Note that the <code>input_before</code> and <code>input_after</code> can also be added to textareas. In this case, the content will be displayed directly above or below the textarea respectively.</p>
<h4>Submit Button Alignment</h4>
<p>The submit button can be aligned left, center or right to fit your form’s desired appearance. Simply provide an <code>align</code> option with either ‘left’, ‘center’ or ‘right’ as value. Example:</p>
<pre><code>[submit align:right "Send"]
</code></pre>
<h4>Inline Character Count</h4>
<p>Contact Form 7 provides a <code>[count]</code> shortcode that renders a number indicating how many characters have been entered or how many characters are remaining in a specific input field. Using it on its own looks kind of ugly though. But guess what, you can adjust that too by adding an option <code>include_count</code> to any text / email / url / tel / textarea input. You can optionally specify a value for that option as well which can consist of the positioning (‘before’ or ‘after’) and the count direction (‘up’ or ‘down’) of the counter. Just as a reminder, when choosing ‘down’, make sure you give the input element a maximum length, otherwise there is no point in having that counter. Example:</p>
<pre><code>[text your-text maxlength:80 include_count:after:down]Your Text[/text]
</code></pre>
<p>By the way, have you read the information about input groups above? You can combine those with the character count (because just seeing a number without any additional information might confuse your site’s visitors). The following example will show a message like ‘433 characters left’ after the field:</p>
<pre><code>[textarea your-text maxlength:500 include_count:after:down input_after:characters---left]Your Text[/textarea]
</code></pre>
<h4>Inline Captcha Image</h4>
<p>If you’ve been using Contact Form 7 together with the <a href="https://wordpress.org/plugins/really-simple-captcha/" rel="ugc">Really Simple CAPTCHA</a> plugin, you are probably aware of the <code>[captchar]</code> (captcha input field) and <code>[captchac]</code> (captcha image) shortcodes it provides. You can still use them independently, but it probably looks nicer to have the captcha image show up inline, right beside its input field. To accomplish this, remove the <code>[captchac]</code> shortcode completely and instead add a new option <code>include_captchac</code> to the <code>[captchar]</code> shortcode. You can optionally give this option a value (either ‘before’ or ‘after’) to mark the location where the image should show up. Example:</p>
<pre><code>[captchar your-captcha include_captchac:before]Captcha[/captchar]
</code></pre>
<h4>Custom Form URLs</h4>
<p>You can add GET parameters to populate your forms with custom initial values by simply using the field name as parameter’s key and the desired value as the parameter’s value. This works with checkboxes, date fields, number fields, select fields, all text fields and textareas. The easiest way to create such a URL is to use the plugin’s function <code>cf7bs_add_get_parameter()</code> where you provide parameters similarly to the WordPress Core function <a href="https://codex.wordpress.org/Function_Reference/add_query_arg" rel="nofollow ugc">add_query_arg</a>. Example:</p>
<pre><code>$my_custom_url = cf7bs_add_get_parameter( array(
    'your-name'     => 'John Doe',
    'your-email'    => 'johndoe@example.com',
    'your-subject'  => 'Support Request',
), 'http://www.example.com/my-custom-form/' );
</code></pre>
<h4>Filter Field Arguments</h4>
<p>As of version 1.2.3, field arguments for every single field can be filtered, which allows you to basically modify anything you like. The filters you need to hook your function into have the following structure <code>cf7bs_form_{{FORM_ID}}_field_{{FIELD_BASETYPE}}_{{FIELD_NAME}}_properties</code>. Yep, it’s a long filter name, but it is necessary so that you can filter in the most detailed way possible. When using one of the filters, replace <code>{{FORM_ID}}</code> with the ID of the form, <code>{{FIELD_BASETYPE}}</code> with the type of the field you need to adjust (be sure to not include the asterisks here!) and <code>{{FIELD_NAME}}</code> with the name of the field. The function should accept one argument, an array of parameters. For an overview about the available parameters, please check the plugin’s source code.</p>
<h3>Unsupported functionality</h3>
<p>While the plugin tries to support as many features as possible from the original Contact Form 7 (in combination with adding new ones!), not everything is and can be supported.</p>
<p>There are two things in particular which are explicitly not supported:</p>
<ul>
<li>the <code>size</code> option on all input fields (Bootstrap form elements scale automatically, so we do not need a custom size for those)</li>
<li>the <code>label_first</code> option on checkbox and radio fields (Bootstrap natively only supports checkboxes and radio buttons where the label is displayed after them)</li>
</ul>
<p>If you discover any other Contact Form 7 feature than the above two which is not supported by Bootstrap for Contact Form 7, you can <a href="https://github.com/felixarntz/bootstrap-for-contact-form-7/issues" rel="nofollow ugc">raise an issue</a> or <a href="https://wordpress.org/support/plugin/bootstrap-for-contact-form-7" rel="ugc">submit a support request</a>.</p>


Bootstrap for Contact Form 7

Great!

This plugin modifies the output of the popular Contact Form 7 plugin to be styled in compliance with themes using the Bootstrap CSS framework.

bSlider – Create Responsive Image, Post, Product, and Video Sliders vs Bootstrap for Contact Form 7