Recently, I've been working on making my webpage responsive. I included Bootstrap and organized my content into two divs side by side within a fluid container.
Despite my efforts to use "pull-right" and "float-right" classes on the left buttons, and "pull-left" and "float-left" classes on the right image, they are not aligning as expected. Am I using the correct classes?
Here's a snippet of the HTML code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 right" style="float-right">
<div class="h1padding"></div>
<a class = "h1" style="float-right" href="" id="introID"><b>INTRO</b></a>
<!-- more content here -->
</div>
<div class="col-md-8 left" style="float-left">
<img src = "assets/images/white-leaf-bg.jpg" id="frame"/>
</div>
</div>
</div>
And here's a snippet of the CSS code:
a:link, a:visited {
font-family: 'Gotham';
text-align: right;
<!-- more styles here -->
}
<!-- more CSS styles here -->
Currently, the image appears on the left, and I still need to figure out how to vertically center it. However, the buttons remain on the left side.
Any help or advice is greatly appreciated. Thank you!