I am using drupal 7, and the bootstrap base theme to make a simple theme for a website I am working on. I am having issues with Drupal forcefully changing my html5 hierarchy and it's causing the site to break.
Is there anyone that would know what would cause the issue?
I have attached the code snippet in particular that is causing issues, as well as a screenshot from Chrome's inspector showing the misplacement. I have confirmed it's doing it on at least 4 browsers, so I do believe it's a drupal issue.
<section> <a id="main-content"></a> <div class="container"> <section class="<?php print $column_width; ?>"> <?php if (!empty($tabs)): ?> <?php print render($tabs); ?> <?php endif; ?> <?php if (!empty($page['help'])): ?> <?php print render($page['help']); ?> <?php endif; ?> <?php if (!empty($action_links)): ?> <ul class="action-links"><?php print render($action_links); ?></ul> <?php endif; ?> <?php print render($page['content']); ?> </section> <aside class="col-sm-4 col-lg-4" role="complementary"> <?php print render($page['sidebar_second']); ?> </aside> <!-- /#sidebar-second --> </div> </section>
As you can see from the image, the
<aside> is being placed outside of the root
<section> instead of inside of it (and underneath the other
<section>), like the template is telling it to do.
EDIT: The 5 console errors are from image files not being found because I haven't uploaded them yet.