Positioning two images at the bottom left and bottom right corners of a container

I have successfully implemented a justified block of text within the footer of my Bootstrap HTML page. Now, I want to enhance it by adding two images underneath the text. These images should have the same height but different widths and be aligned to either side.

<footer>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <span class="copyright">Copyright &copy; Bla Bla 2015</span>
        </div>
        <div class="col-md-6">
            <div class="disclaimer">
            <span>Der ritter überladen ie des den der kâmen und. Daz ane waz ie der waz Tristan, lant ende, wol daz, schaden nieman lant benaeme sîne ze der wîp, schaden liute ie. Und diz von, trôstes wârheit haete nieman unde. Iuch meistiu alsô lande ze belanget, vol niht verluren, meistiu er schedelîchen swer ritter ze ie niht ende swer</span>
                <img id="logo_left" src="http://s1.postimg.org/j4mav1ikb/logo_left.jpg" class="img-responsive img-left" alt="">
                <img id="logo_right" src="http://s1.postimg.org/bda6a83sr/logo_right.jpg" class="img-responsive img-right" alt="">
            </div>
        </div>
        <div class="col-md-3">
            <ul class="list-inline legallinks">
                <li>
                    <a href="#modal_legal1" class="legal-link" data-toggle="modal">Legal1</a>
                </li>
                <li>
                    <a href="#modal_legal2"class="legal-link" data-toggle="modal">Legal2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Despite my efforts, I am unable to achieve the desired result with the images. Here is the link to the jsfiddle for reference: jsfiddle

Thank you in advance for any assistance provided.

csstwitter-bootstrap

Answer №1

It's important to follow janaspage's advice. The text should be wrapped around p tags instead of span tags, and pay attention to the img classes being used - such as img-responsive and the unnecessary img-left class. It's better to use Bootstrap's pull-left (or pull-right) classes instead. So, make sure to:

  • Use p tag instead of span
  • Change img-left to pull-left and img-right to pull-right

I hope this information is helpful!

EDIT: Don't forget to add "clear:both;" to your ul class ".list-inline". This will prevent your links from getting stuck between images on smaller screens.

Answer №2

Make sure to apply the float property to both the #logo_left and #logo_right IDs.

#logo_left {
  float: left;
}

#logo_right {
  float: right;
}

Additionally, insert the following code above the image tag (after the span text):

<br style="clear:both"/>

Check out this link for further reference: http://jsbin.com/pesegebubo/edit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on eliminating the header section in SlickGrid?

Is there a way to remove the header row in SlickGrid using CSS? I know there isn't an API for it, but maybe some CSS tricks can do the job. Any suggestions? Check out this example: Calling all CSS experts! I'm looking for assistance in modifyin ...

htmlcssslickgrid

Retrieve the object when hovering over an element in the grid

In a collection of 16 items belonging to the same class, I am looking for a way to implement a mouseover effect that changes the opacity of only the specific item being hovered over and not all items in the class. Check out this link for an example ...

jquerycss

jquery toggle for partial visibility not functioning properly

Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...

javascriptjqueryhtmlcss

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

htmlcssbootstrap-4

Header bar not extending across the entire width of the screen when viewed on mobile devices

View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes. I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width ...

htmlcssbootstrap-4

css background images are fully covered

Hey there! I recently created a CSS image that covers the entire background of my website. However, when I added a picture in the HTML, it doesn't show up because it's being overlapped by the CSS background. Check out my CSS code: { margin: 0 ...

htmlcss

The addEventListener feature in Bootstrap 5.2.3 seems to be malfunctioning

I have a sample page with a Bootstrap dialog being returned from the server. I want to display it inside a DIV. However, when clicked, I receive this error: Uncaught TypeError: myModal.addEventListener is not a function It points to this line of code: ...

javascripttwitter-bootstrapbootstrap-5

Formatting dates for the bootstrap datepicker

Hi there! I am currently using a bootstrap datepicker and I am attempting to retrieve the value from the datepicker text box in the format of date-month-year for my controller. However, at the moment, I am only able to obtain values in the format Tue Oct 0 ...

javascripttwitter-bootstrapdatepicker

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

javascripthtmlcssreactjs

Unable to adjust the width of a datatable using the jQuery Datatable plugin version 10.1

I am facing a challenge with multiple datatables using the jQuery plugin on my page. Some of the datatables fit perfectly within the page width, while others extend beyond the page boundaries. Despite trying various methods, including setting styles in HTM ...

jqueryhtmlcssdatatable

The image sequence animation only loads once and does not continue indefinitely

Here is my code snippet: I have a sequence of 15 images that should load one after the other in a loop with a specific time interval. However, I am facing a bug where the images keep playing infinitely when the page loads, but I want them to play only once ...

javascripthtmlcss

What is the best way to assign a background color to each tr element using JavaScript?

I have a list of table rows with different background colors like <tr bgcolor="#OC6110"> <tr bgcolor="#000000"> <tr bgcolor="#FFFFFF"> Is there a way to assign unique background colors to each tr element without specifying its id value ...

javascripthtmlcss

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...

htmlcssangulartypescript

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class: https://i.sstatic.net/npzhC.png If I set the position to "relative," it looks like this (all st ...

htmlcssbootstrap-4search-box

The cascading style sheet does not have any effect on the layout of the tables within the

I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...

css

Creating a curved edge for a shape in React Native can add a stylish and

Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...

javascriptcssreactjsreact-native

Menu with option to delete next to each selection item

My task is to create a drop-down menu with a delete 'X' option next to each item. This functionality should work even when the drop-down is dynamically populated, without resorting to using a list as an alternative. UPDATE: The icons next to eac ...

htmlcssbootstrap-4

Is there a way to remove this annoying double Google search bar?

Looking to replicate the Google home page for a project using HTML and CSS. I'm having trouble with incorporating the highlighted code (as shown in the second picture and identified by bold and italicized text) into my code. When I try to add it, I en ...

htmlcss

The CSS performs perfectly in IE9 but displays completely disorganized in IE8

I am facing issues with my CSS styles in IE8, specifically with border radius and background gradients, as well as the size of the container. I have tried using CSS PIE to fix it, but that also didn't work. If anyone has any suggestions or solutions, ...

cssinternet-explorerinternet-explorer-8

"GitHub Pages encounter an issue locating the Bootstrap Sass during the build process

I'm currently working on a GitHub pages site (specifically, a project page) that utilizes Jekyll and I'm eager to incorporate Bootstrap into my project. To achieve this, I went ahead and downloaded the uncompiled twbs files and inserted the boots ...

twitter-bootstrapbootstrap-4sassjekyllgithub-pages