Remove clearfix from section class in custom theme

Question

I'm attempting to edit the template for my pages to allow it to show the content with a block beside it rather than beneath it. I'm currently using bootstrap to lay out my grid.

In my page.tpl.php I have

<div class="container">
<div class="col-lg-9">
    <?php print render($page['content']); ?>
</div>
<div class="col-lg-3">
    <?php print render($page['sideblock']); ?>
</div>
</div>

I want the content block and the sideblock to be side by side. However when the page renders it wraps the content block in

<section id="block-system-main" class="block block-system clearfix">

I noticed that when I removed the clearfix class to the section tag I was able to display it side by side. But I don't see any method to remove the clearfix class from this.

Answer 1

This could easily be solved with jQuery, but I too would prefer to simply stop it from rendering.

Jquery: $('#block-system-main').removeClass('clearfix');

Rendering: Of course, you could rename the modules/system/region.tpl.php file to 'region--content.tpl.php' and put it in your sites/all/themes/YOURTHEME folder, then remove the "$classes" variable.

Answer 2

For Drupal 8, the best approach for this is to just copy the bootstrap/block/block.html.twig template from the bootstrap theme into your custom themes folder, and just remove the 'clearfix' class from the twig classes block.

Answer 3

It's hard to tell without a link to the specific page. But try this, a CSS only solution:

#block-system-main.clearfix:after {
    display: inline;
    clear: none;
}