Align images at the center of a division using the Bootstrap framework

I'm facing an issue with centering social network icons under a div in my login form while keeping it responsive. Can someone please assist me with this problem?

Please help me!!.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="row my-5 justify-content-center">
  <div class="text-md-right text-sm-left col-sm-6 col-md-5">
    <p>Sign With</p>
  </div>
  <div class="col-md-4">
    <a href="#" class="">
      <img src="https://i.ibb.co/y5ZdM7r/ICON-FB.png" class="float-center">
    </a>
    <a href="#" class="">
      <img src="https://i.ibb.co/c3g5tdd/ICON-GOOGLE.png" class="ml-2 float-center">
    </a>
  </div>
</div>

Thank you!

javascripthtmlcssbootstrap-4responsive-design

Answer №1

To center content using Bootstrap classes, include 

d-flex justify-content-center align-items-center
in the div that wraps the a tags.

If you're not using Bootstrap and want to center content with regular CSS, here's how:

You need to apply the following CSS properties to the parent div (the one containing the a tags):

display: flex;
align-items: center;
justify-content: center;

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

Sharing stickers with Discord.js version 13

I have encountered an issue while trying to forward messages sent to my bot via DM. Everything is functioning smoothly, except for sending stickers. Whenever I attempt to send a message with a sticker, an Error DiscordAPIError: Cannot use this sticker is ...

javascriptnode.jsdiscord.js

Discover data using JavaScript recursively through paths

Here is the data structure I am working with: [ { name: 'root', children: [ { name: 'page', children: [ // and so on ] } ] } ] I am in need of a function that can retrieve ...

javascriptrecursionecmascript-6

Which is better: Starting with rows or columns in Bootstrap 4 layout design?

Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...

htmlcssbootstrap-4

Creating a dynamic row in an HTML table with elements inside

I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...

htmlangular

What is preventing my video from filling the entire screen?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d ...

javascripthtmlcsssass

Navigating React Redux Pages Using React Router

At the moment, I am exploring the possibility of creating an application using React and Redux. Most examples I've come across make use of React Router, so I'm curious about its purpose. My application will consist of multiple pages (at least 20 ...

javascriptreactjsredux

Exploring the power of DOM manipulation in both jQuery UI and AngularJS UI Router

I have a query regarding the integration of jQuery UI and AngularJS UI Router. My aim is to incorporate jQuery UI themes into my application, however, when using AngularJS UI Router, I face issues with an incomplete DOM tree. Is there a way to successfull ...

javascriptjqueryjquery-uiangularjs

Sails.js Unidirectional Association

I'm currently working on establishing a relationship between two MySQL tables in sails js. I went through the documentation regarding this topic which can be found here. However, I encountered an error message: error: Sending 500 ("Server Error") re ...

javascriptnode.jssails.js

guide on incorporating Google Maps in a Vue.js application

Can anyone help me with displaying a Google Map using Vue.js? I have provided the code below, but I keep getting an error saying "maps is undefined" even though I have installed all the necessary dependencies for Google Maps. <div id="map"></div& ...

javascriptgoogle-mapsvue.js

The Table and Div elements do not have identical widths when set to 100%

I am facing an issue with a Div and Table placed inside a container. Although they are meant to completely fill the container, occasionally there is a one pixel difference which can be quite annoying. I have prepared a test case and attached a screenshot h ...

htmlcss

How can one efficiently navigate through extensive functions without risking surpassing the stack limit?

I am currently developing an application in Node.js that requires numerous configuration and database calls to process user data. The problem I am facing is that after reaching 11,800+ function calls, Node throws a RangeError and exits the process. The er ...

javascriptnode.jscouchdbexpress

Implementing CSS keyframes when a specified PHP condition is satisfied

I am looking to implement an opening animation on my website that should only play when a user visits the site for the first time. I want to avoid displaying the animation every time the page is reloaded, so it should only run if a cookie indicating the us ...

javascriptphpjqueryhtmlcss

Creating a personalized script in ReactJS: A step-by-step guide

If I have already built a component with Google Chart in ReactJS, and I want to implement a feature that allows the Legend to show/hide data using a JavaScript script provided here, how and where should I integrate this code to work with my chart? Here is ...

javascriptreactjs

Ways to access the innerHTML of a specific HTML element by targeting its class using jQuery

I'm working with HTML code that looks like this: <div class="a">html value 1</div> <div class="a">html value 2</div> Is there a way to retrieve html value 1 and html value 2 using jQuery? ...

jqueryhtmlinnerhtml

The div element is finally loading properly after multiple clicks

I need some assistance with loading dynamic divs in Angular. I have created a button that adds new divs each time it is clicked in a specific area. However, once these new divs are added, they appear incorrectly: https://i.sstatic.net/sAE6q.png After add ...

javascripthtmlangulartypescriptprimeng

How to resolve: Preventing Ajax - Post request from executing repetitively

I am facing an issue with a table that is formatted using the Datatables script. There is a column in the table which contains icons for actions. When a user clicks on an icon, a modal is loaded and its content is fetched using the POST method. The modal ...

javascriptphpjqueryajaxhttp-post

Enhance your jQuery experience by customizing the .click function

When designing my website, I wanted it to be functional on both touch devices and desktops that do not have touch capabilities. To ensure a smooth user experience on touch devices, I implemented the tappy library to eliminate the 300ms delay on jQuery .cli ...

javascriptjquerytouch

Eliminate duplicated partial objects within a nested array of objects in TypeScript/JavaScript

I'm dealing with a nested array of objects structured like this: const nestedArray = [ [{ id: 1 }, { id: 2 }, { id: 3 }], [{ id: 1 }, { id: 2 }], [{ id: 4 }, { id: 5 }, { id: 6 }], ] In the case where objects with id 1 and 2 are already grou ...

javascriptarraystypescriptmultidimensional-array

Ways to customize the default home icon

My current theme is Redmond, but I would like to change the color of the home icon in the breadcrumb. To achieve this, I have included the hot-sneaks theme in the pom.xml file: <dependency> <groupId>org.primefaces.themes</groupId&g ...

cssjsfprimefaces

Having trouble getting JQuery Ajax POST to work in Codeigniter

Encountering an issue with jQuery AJAX post in CodeIgniter, where clicking the submit button triggers an error. Below is the code snippet: home.js form.on('submit', function(e){ e.preventDefault(); var fields = {}; form.find(' ...

javascriptphpjqueryajaxcodeigniter