These are two different blocks- an accordion and a basic text block. First we are going to style them to be side by side.

Add "col". Save. Repeat process with other block as well.

The output is side by side. Columns do not have to be equal width. by adding "col-[[number]] " to each column, you can choose the width of each column.

The numbers should add to 12. Let's do an example. Click the edit icon for the accordion.

Now it is taking up a larger width. The other side should be "col-4", as 8+4=12. 

This means the accordion is twice as wide as the basic block.

For now, we can leave them both on "col-6". 6+6=12, and this will leave them at equal widths. Repeat this process with both blocks.

One missing piece to our style is the breakpoint property. If you view these columns on mobile, they stay side by side even on small screens because we haven't told it *not* to.

Sed tempus vestibulum elementum. Fusce bibendum purus eros, ac bibendum ex auctor quis. Integer non dui non nibh aliquet scelerisque. In fermentum non sem ac tempus. Nulla pretium magna nec ultricies aliquet. Phasellus luctus nulla orci, a tempor tellus ultrices ac. Nulla laoreet imperdiet erat, quis varius lorem finibus vel. Sed a mauris scelerisque quam elementum consequat non finibus nisi. Etiam ligula justo, commodo ac volutpat ac, laoreet nec orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur fringilla nunc, non sollicitudin nisi porttitor semper. Quisque eu volutpat felis. Mauris pulvinar, eros sit amet euismod porta, enim purus aliquet nunc, at rutrum purus eros eu quam. Nulla pharetra eget velit id fermentum.

Add "col-md-6". The breakpoint is the middle property. This means on a mid size breakpoint screen, 800px and below, the columns will break and they will no longer display in column format. The breakpoint property options are [[xs]] [[sm]] [[md]] [[lg]] [[xl]] [[xxl]] .Repeat this property on both blocks.

On desktop, there will be no change as we have made no changes to any breakpoint above [md](medium-800px). We will see this display on mobile later. For now, let's add a background color to our basic block.

Here is our output. But with the color, we can see the text is close to the edges. We can add a style for padding to solve this.

Add "p-4". The number value is the amount of defined spacer between elements. In this case, "4" = 16px. The values range from [[0-10]], and [[auto]].

Block description
Sed tempus
Title
 Machine name: block_content_01e300aa_06cf_44b8_887c_6e4cadb3c558Edit
This field supports tokens. Browse available tokens.
 Display title
Region
Emergency banner
Header
Status announcements
Highlight
Main Navigation
Additional Navigation (eg menus, social icons, etc)
Breadcrumbs
Top Content
Main Content
Sidebar Left
Sidebar Right
Bottom Content
Footer
Hidden Blocks
Select the region where this block should be displayed.
 Unique
Check if the block should be uniquely placed. This means that the block can not be overridden by other blocks of the same type in the selected region. Most often you want this checked if a block unintentionally contains the same content as another block on the same page.
Block Class

Sed tempus vestibulum elementum. Fusce bibendum purus eros, ac bibendum ex auctor quis. Integer non dui non nibh aliquet scelerisque. In fermentum non sem ac tempus. Nulla pretium magna nec ultricies aliquet. Phasellus luctus nulla orci, a tempor tellus ultrices ac. Nulla laoreet imperdiet erat, quis varius lorem finibus vel. Sed a mauris scelerisque quam elementum consequat non finibus nisi. Etiam ligula justo, commodo ac volutpat ac, laoreet nec orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur fringilla nunc, non sollicitudin nisi porttitor semper. Quisque eu volutpat felis. Mauris pulvinar, eros sit amet euismod porta, enim purus aliquet nunc, at rutrum purus eros eu quam. Nulla pharetra eget velit id fermentum.

Aliquam erat volutpat. Nulla dictum metus id convallis maximus. Nam et tempor quam. Proin felis ipsum, imperdiet vitae tincidunt sit amet, porttitor vel lacus. Phasellus feugiat vel est eget pretium. Donec iaculis eros sed libero ullamcorper aliquam. Cras blandit augue odio, a semper diam tincidunt sit amet. Suspendisse elit ligula, finibus ultrices elit non, finibus congue sapien. Integer elementum leo sit amet lacus molestie finibus. Nulla at tellus eget turpis fermentum sodales vitae vel odio. Vestibulum eleifend eros vitae risus tristique, a porta sem mollis.

 

 Nulla at tellus eget turpis fermentum
Proin felis ipsum, imperdiet vitae tincidunt
 consectetur adipiscing elit
Nulla pretium magna nec ultricies aliquet
 eros sit amet euismod porta

Quisque elementum luctus turpis eget aliquam. Aliquam auctor consequat vulputate. Mauris ut tempus nunc, nec imperdiet libero. Aliquam accumsan, leo sed vestibulum volutpat, mauris metus scelerisque ante, vitae porta eros odio et turpis. Etiam interdum tincidunt velit, sed tempus dolor congue in. Mauris faucibus ullamcorper felis nec sodales. Nam tincidunt metus volutpat tristique varius.


metus volutpat volutpat ac 

Because we added our breakpoint property on columns, On mobile we can see the columns break after the screen is **smaller** than 800px. The columns still seem too squished together at this breakpoint, so we want them to collapse even earlier than 800px.

Open configuration options

Quisque elementum

 

luctus turpis eget aliquam. Aliquam auctor consequat vulputate. Mauris ut tempus nunc, nec imperdiet libero. Aliquam accumsan, leo sed vestibulum volutpat

purus eros
Nulla at
fermentum sodales vitae vel odio
Ut varius interdum

Aliquam auctor

Change "col-md-6" to "col-lg-6". This means instead of the columns collapsing at a medium breakpoint, it happens at a large breakpoint.

In this case, Now if the screen is less than 992px, these blocks will no longer be in columns. Repeat this property change on both blocks.

We will take a look at the breakpoint change in a later step.

Another change we want to make first is for the accordion block. It runs all the way to the edge next to the block beside it. We can add a padding class to this block as well.

Unlike with the gold basic block, we don't want padding all the way around. There is sufficient space on the top and bottom of this block, we only need it on the left and right. We can use the [[x]] property. [[x]] is defined as padding to the left and right, only. You can also use [[y]] for top and bottom. [[t ]]for top, and [[b ]]for bottom. The property goes after the [[p ]]indicator. It is written as" "px-4".

Now we can see all of our changes. We have padding on our accordion on the left and right, and now this is as "squished" as our columns will look using the [[lg ]]breakpoint property...

...before collapsing when the screen is **smaller** than 992px.

Our final block styling is complete using the DoCS style guide.

Step-by-step instructions on how to position blocks side by side, adjust their widths, and implement responsive design principles. By following this guide, users can enhance their website's layout and ensure a visually appealing and functional design across different screen sizes using essential tools such as grid systems, color usage, padding, and breakpoints.

DoCS Drupal Style Guide: Example Through Block Classes