25th Nov '22
/
0 comments

Floats in Bricks for Wrapping Text Around Images

In the Bricks Facebook group a user asks:

Float, left or right?

Just a quick question.

Am I going crazy or can’t I specify a float anywhere in a div’s settings?

Does this have to be done with custom css or are there just settings to easily indicate which float you want to give a div or another element?

If this has to be done with css no problem but find me an accident now

As can be seen on the Wrapping Text Around Images WordPress codex page,

In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

and Bricks parent theme does support these.

alignleftalignright and aligncenter classes can be added on images to wrap text or to center the images.

Here’s how you can make use of these in Bricks.

Add a Section and inside its Container, a Div having an Image and Basic Text.

It is important that you use a Div element as the parent here if you want to have text wrapping around the image because its display property is set to block by default. If you do use a Container or Block, change their display to block since their display is flex out of the box.

Add alignleft (or alignright) class to the image.

If you would like to add the class in the active class input, you may want to lock it to prevent adding additional style rules to it. Alternately, you could go to STYLE → CSS → CSS Classes and add it there.

Bonus

It is also possible to apply these alignment classes to a div containing other Bricks elements and have text wrap around it.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Leave the first comment

 

Related Tutorials..

Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
Pro
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Categories:
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Categories:
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Categories:
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Categories:
Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories: