What is preventing me from properly aligning these two divs side by side?

Can someone please assist me with aligning two images side by side in a footer using bootstrap? I have tried offsetting the columns but the images keep stacking on top of each other instead of next to each other.

<div class="row">
        <div class="col-xs-offset-5 col-xs-1">
            <a  href="https://www.instagram.com/thesmilecollective_/">
                <img src="Insta_link.png">
            </a>    
        </div>
        <div class="col-xs-offset-6 col-xs-1" id="twitter_img">
            <a href="https://twitter.com/Adsthelad345">
                <img src="twitter_link.png">
            </a>
        </div>
    </div>

I would greatly appreciate any assistance in solving this issue.

htmlcsstwitter-bootstrapweb

Answer №1

Your total column span exceeds 12 columns.

  • class="col-md-offset-4 col-md-2" consumes 6 columns by spanning 2 columns and offsetting by 4.

    col-md-offset-5 col-md-2" uses up 7 columns by spanning 2 columns and offsetting by 5.

Adjust one of the offsets to resolve this issue.

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

How can I create a dashed border for a pie chart using highcharts?

Is there a way to change the default solid border of a pie highchart to dashed? This modification is only necessary for pies without data or with negative data values. Perhaps it's possible to redraw the SVG of the border, like in this example: https: ...

javascriptcsssvghighchartspie-chart

Incorporate dc.js into your Cumulocity web application

Our team is facing a challenge while trying to integrate dc.js into our Cumulocity web application. While the standalone version works perfectly, we encounter issues when attempting to use it within Cumulocity. Below is the code for our standalone applica ...

javascripthtmlcumulocity

Incorporate new functions through the css class name "javafx"

On my dashboard, I have 10 labels that share the same CSS class for mouse over events. Now, I want to change the button style after it is pressed and remove the mouse over effect. How can I achieve this? ...

javacssjavafxfxmldashboard

Unlocking the power of python with web2py by tapping into html form values

I'm working on a project using web2py and need to incorporate ajax/javascript with a form. Currently, when a user selects an option in the departure box, the arrival box appears. However, I'm unsure of how to filter the list of arrival options ba ...

javascriptpythonhtmlajax

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

javascripthtmlmysqljson

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

csscss-float

What is the process for removing the highlighted border from a navigation menu in ASP.NET?

I am currently utilizing the navigation menu in the ASP.NET toolbox, but I am struggling to remove an unwanted golden border. Despite my efforts, I have not been able to find any information on how to resolve this issue. The golden border only appears when ...

asp.netcsshighlightnavigationbar

Aligning a DIV both horizontally and vertically in the center of a background

My current challenge involves coding a layout using CSS and Bootstrap 4: https://i.sstatic.net/1uCwG.png In this layout, DIV1 and DIV2 are integral parts of the background and need to remain fixed in their positions - DIV1 in the upper right corner, and ...

htmlcssresponsive-designbootstrap-4

Locking element in place beneath precise browser width

Below is the script I am working with: $(window).resize(function(){ if ($(window).width() >= 992){ var windw = this; $.fn.followTo = function ( pos ) { var $this = this, $window = $(windw); $window.scroll(function(e){ if ($window.scrol ...

jquerycss

Issues with loading Angular 4 Bootstrap JS post compiling

Utilizing normal bootstrap 3 within an Angular 4 application has been working well when compiling for development using ng serve. However, upon building the application with ng build, I encounter an issue where my bootstrap.js fails to load. Below are th ...

twitter-bootstrapangularangular-cli

Centralized Column Design with Bootstrap 4

Currently, I am using bootstrap 4 and have a row with 3 columns. The center column is set to col-7, but I need it to be flexible and take up all remaining horizontal space in the row. I attempted to use flex-col, but it caused issues with the layout. In th ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-grid

Implementing personalized font styles in HTML on a WordPress platform

I recently followed a tutorial on how to upload custom fonts to my WordPress website, which you can find at the link below. I completed all the necessary steps, such as uploading to the ftp, modifying the header.php file to include the font stylesheet, and ...

phphtmlcsswordpressfonts

What are the steps to switch multiple CSS styles for creating a dark mode?

I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...

javascripthtmlcssdarkmode

Issue with a Jquery toggleClass function not working properly on hover

Hello everyone! I am a newbie in the community and relatively new to the world of web programming. I am encountering an issue that is really frustrating me. I attempted to use this code to add a class when hovering over the ul list element so that I can d ...

javascripthtmljquerycssfrontend

Automatic display of jquery datepicker in modal dialog is a convenient feature

After finally getting the datepicker to function in my modal dialog, I encountered an issue where it doesn't open automatically the first time I click on it (as expected). However, when I close the dialog and reopen it, the datepicker pops up automati ...

jquerytwitter-bootstrapjquery-uidatepicker

What could be the reason for the discrepancy between my get_token() function and the value obtained from request.META.get("CSRF_COOKIE")?

Can anyone shed light on why I'm facing this particular issue? I am currently exploring the integration of Angular 17 as a Frontend with Django as a Backend. While validating a form, I encountered an issue where the token obtained from Django does no ...

pythonhtmldjangoangulartypescript

Customize the default email validator in AngularJS

I am looking to customize the email validator in AngularJS by using a custom string for validating email addresses. However, when I tried implementing the code provided in the documentation, it doesn't seem to work as expected. Here is the code snippe ...

javascriptangularjshtmlangularjs-directiveangularjs-validation

Adjust the font size and center alignment in the navigation bar using Bootstrap

I'm a beginner when it comes to using bootstrap and I'm having trouble adjusting the font size of my application's title. While I was able to change the color of the text, I can't seem to find where the font-size property is located for ...

htmlcsstwitter-bootstrap

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

Differentiate between chrome and chromium with the help of Javascript programming

Can we differentiate between Google Chrome and the open-source Chromium browser using JavaScript? It appears that the navigator.userAgent property is the same in both browsers. ...

javascripthtmlgoogle-chromechromium