Organizing Bootstrap Columns

Currently, I am facing an issue with the footer section of the website I am working on. The problem lies in the order in which the elements are displayed. I would like the social icons to appear above the copyright symbol.

Take a look at the footer.

Here is the HTML:

<div id="footerbot">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h5 class="fbh">&copy;2018 - Appo, All Right Reserved</h5>
        </div>
        <div class="col-md-6">
            <a href="#"><img src="img/facebook.png"  href="#"></a>
            <a href="#"><img src="img/twitter.png"  href="#"></a>
            <a href="#"><img src="img/dribble.png" href="#"></a>
            <a href="#"><img src="img/gplus.png" href="#"></a>
            <a href="#"><img src="img/youtube.png" href="#"></a>
        </div>
    </div> <!-- end of row -->
</div>

CSS:

#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}

I attempted to add the 'order-md-6' class to each div with col-md-6. However, it did not work as expected and disrupted the layout by centering both elements. Is achieving this possible in Bootstrap 4? Additionally, I am struggling to center these items, as shown in the image I uploaded. I have been trying to solve this for two hours now without any success. Any help would be greatly appreciated. Thank you.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Bootstrap 4 utilizes flexbox for arranging columns within rows, allowing you to adjust the order of columns in your CSS by adding the following code:

.col-md-6:last-child {
  order: -1;
}

Answer №2

It looks like the code snippet you provided may not be complete for your footer section. If that is all the HTML you have, you might be missing a closing tag.

If you want the icons to be positioned above the copyright text and centered, you can try the following CSS:

#footerbot .socialIcons {
  text-align: center;
}
<div id="footerbot">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="socialIcons">
                    <a href="#"><img src="img/facebook.png" alt="Facebook" /></a>
                    <a href="#"><img src="img/twitter.png" alt="Twitter" /></a>
                    <a href="#"><img src="img/dribble.png" alt="Dribble" /></a>
                    <a href="#"><img src="img/gplus.png" alt="Google Plus" /></a>
                    <a href="#"><img src="img/youtube.png" alt="YouTube" /></a>
                </div>
                <h5 class="fbh">&copy;2018 - Appo, All Right Reserved</h5>
            </div>

        </div> <!-- end of row -->
    </div>
    </div>

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

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A Python CGI script that is able to accept and process data submitted

I have been working on a python program to gather data from an HTML form. Here is the snippet of my HTML code: <html> <head> <title> NBA Survey! </title></head> <form method = "POST" action = "result.py"> <hr> Who ...

pythonhtmlformscgi

After applying CSS, I am unable to click on the radio buttons

Even after selecting the other two, it still defaults to the first one. Here is my code: input[type=radio] { display:none; } input[type=radio] + label:before { content: ""; display: inline-block; ...

csshtml

What is the best way to link a file to index.html using feathers.js?

I am currently learning feathers and encountering a problem. I am attempting to include files similar to PHP's switch function. For instance: /src/middleware/index.js 'use strict'; const handler = require('feathers-errors/handler&ap ...

javascripthtmlnode.jsfsfeathersjs

What is the best way to delete a single asterisk from the content of an HTML <td> element?

Looking for a way to remove or replace an asterisk from the inner content of a <td> element. I have a block which includes some text and an input field. For this example, let's say <td> == this $(this)[0].innerHTML "*&nbsp;<input ...

javascriptjqueryhtmlhtml-tableinnerhtml

What is the best way to store and recall user selections from a dropdown menu using PHP?

Newbie in the house. I managed to store my user's choice from a select menu, but now it seems like the validation is not working as expected. How can I resolve this issue? This is the snippet of code I'm using for validation: <?php $color ...

phphtmlvalidation

What is the best way to duplicate this content from a picture using CSS?

Trying to replicate text in an image using HTML and CSS. Wondering if there's a better way than setting each line with its own font size. Here's the image I'm working on: https://i.sstatic.net/bMPhy.png Current issues with the approach: ...

htmlcssbootstrap-4

Utilize jQuery to enclose nested elements within a parent element

There is a Markup presented below, where this HTML content is being generated from Joomla CMS. I am seeking a jQuery method to reorganize this HTML structure without modifying its PHP code. <div class="item column-1"> <div class="page-header"& ...

javascripthtmljquery

Troubleshooting the issue of JavaScript not executing on elements with a specific CSS class

I am attempting to execute a JavaScript function on each element of an ASP.NET page that is assigned a specific CSS Class. Despite my limited knowledge of JavaScript, I am unable to determine why the code is not functioning properly. The CSS Class is being ...

javascriptjqueryhtmlcssasp.net

Off-center alignment in left margin with Bootstrap 3

When using bootstrap 3, I have noticed that the left margin starts to indent gradually with each row. Here is a screenshot demonstrating the issue: please see here The code for the first two rows in the image looks like this: <div class="row"> ...

twitter-bootstrap-3htmlmargins

Unable to display image on HTML due to the image src not loading

Hey folks! I'm currently working on a TodoApp using react js, and although I have a basic layout set up, I am encountering an issue while trying to add images to the app. Unfortunately, the images are not loading as expected. Sharing the relevant cod ...

htmlreactjsweb

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

How can I align two divs next to each other in Bootstrap, with one having a set

When working with Bootstrap 4, I am facing the challenge of placing two divs side by side. While the conventional method involves using a row with two columns, like this: <div class="row"> <div class="col-6"> </div> <div c ...

twitter-bootstrapbootstrap-4

Styles for the Top-bar Navigation in Foundation Framework

Is there a way to customize the default styles of the top bar and nav bar in my project? I have already referred to the Foundation Docs regarding the Top Bar, which mentions the use of SASS. However, I am unsure about how to implement it. Any guidance wou ...

cssnavigationsasszurb-foundation

I am facing an issue where Chrome is causing my image set with max-width to stretch

I am currently facing an issue with adjusting the max-width of images in the CMS I am working with. When I set a max-width in Chrome (haven't tested in other browsers yet), the height of the image ends up getting stretched - you can view the problem h ...

image-scalingcss

Can a sophisticated matrix-like design be created using a CSS grid system?

I'm currently working on implementing a unique grid structure in Material-UI using a CSS grid: Browse the desired complex layout here Here's the current CSS grid layout I've created with Material-UI: View the existing layout here This is ...

htmlcssmaterial-uicss-grid

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

javascripthtmlcss

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...

javascriptcssreactjsmaterial-uijavascript-objects

Create partial form copies dynamically based on user selections within a nested form

Attempting to design a form that dynamically generates copies of a nested form based on user input. Three models are involved: Visualizations, Rows, and Panes. The goal is to enable users to select from a dropdown menu, create a row, and choose 1, 2, or 3 ...

javascriptjqueryhtmlruby-on-railsforms

Basic HTML Audio Player Featuring Several Customizable Variables

I have a unique API that manages music playback. Instead of playing audio in the browser, it is done through a Discord bot. Achievement Goal https://i.stack.imgur.com/w3WUJ.png Parameters: current: indicates the current position of the track (e.g. 2:3 ...

javascripthtmlcssangular