Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code:

<div class="d-block mx-auto col-centered">
        <ul id="social_nav" class="clearfix d-block mx-auto">
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        </ul>
    </div>

This is the CSS code:

.main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}

footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It is recommended to specify a width for your div.

.main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="d-block mx-auto col-centered" style="background:red; width: 100px;">
  <ul id="social_nav" class="clearfix d-block mx-auto">
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
  </ul>
</div>

Answer №2

To achieve this, you can create a new class called 

.col-centered{
     border: 1px solid;
    height: 150px;
    width: 400px;
     margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}


 .main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
.col-centered{
     border: 1px solid;
    height: 150px;
    width: 400px;
     margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <div class="d-block mx-auto col-centered">
        <ul id="social_nav" class="clearfix d-block mx-auto">
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        </ul>
    </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

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

Tips for maintaining an open sub menu while hovering over a link

I'm currently working on a navigation menu using jQuery that includes categories, subcategories, and their subsequent subcategories. However, I am facing some issues with it not functioning as intended. To avoid cluttering this space with excessive HT ...

jquerycssdrop-down-menu

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

javascripthtmlfunctionvue.jsemit

Obtain JSON data through an HTTP POST call

Here is a function that I have, which was mainly borrowed from the solution to another problem on SO: function sendPostRequest(url, data) { request( { url: url, method: "POST", json: true, body: data }, function(error, response, body) ...

javascriptjsonnode.jshttprequest

Controllers governing adult and juvenile entities

When working with two controllers, one as the parent and the other as the child. <div ng-controller="firstCtrl as first"> <div ng-controller="secondCtrl as second"></div> </div> JS: app.controller('firstCtrl', functi ...

javascriptangularjscontrollerseparation-of-concerns

Having trouble with PHP AJAX POST and receiving incorrect data

My AJAX call to a PHP script is not returning the expected data. This is the AJAX request I am making: $.ajax({ type: "POST", url: 'http://www.boomlings.com/database/getGJUserInfo20.php', contentType: 'application/x-www-fo ...

phpjqueryajax

Is it true that Safari restricts AJAX Requests following a form submission?

I've developed a JavaScript-based upload progress meter that utilizes the standard multipart submit method instead of submitting files in an iframe. The process involves sending AJAX requests during submission to retrieve the percentage complete of th ...

javascriptajaxsafariyui

The Ajax search box displays results from the most recent query

Hey there, I need some assistance with a request: var searchResults = new Array(); var ajaxRequest = function (value, type) { if (typeof(type) === "undefined") type = "default"; var ajaxData = { "title" : value, "limit" : ...

javascriptjqueryajax

Displaying JSON string with escaped backslashes

After conducting some research on serializing a datatable to a JSON string, I discovered that my code is working but displaying backslashes in the API response. It seems this issue is caused by double serialization of the data. While I understand the probl ...

jqueryjsonmodel-view-controller

Leveraging the power of jQuery mobile in tandem with Rails' RESTful controller

Recently, I attempted to incorporate jQuery mobile views into a Rails 3 project and encountered some issues related to RESTful controller actions. For example, when using PUT/posts to create a new record with the Create Action, everything seems to work fin ...

ruby-on-railsjqueryjquery-mobile

To activate a function, simply click anywhere on the body: instruction

One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...

javascripthtmlangularjs

I am struggling to make my button hover effects to function properly despite trying out numerous suggestions to fix it

As a newcomer, this is my first real assignment. I've managed to tackle other challenges successfully, but this one seems a bit more complex and I'm struggling to pinpoint where I'm going wrong. Despite googling various solutions, none of th ...

javascriptpythonhtmlcssfrontend

Handsontable: A guide on adding up row values

I have a dynamic number of columns fetched from the database, making it impossible to predict in advance. However, the number of rows remains constant. Here is an illustration: var data = [ ['', 'Tesla', 'Nissan', & ...

javascriptjqueryhtmlhandsontable

What is the reason for the initial display of an empty option when using AngularJS to select an

Every time I refresh the page, the initial option is blank. How can I set Any Make as the default selection? Below is the code snippet from my view: <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-chan ...

javascripthtmlangularjshtml-select

When using jQuery without $.ajax, the combination of $.POST and json functions will return "null" when retrieving data from PHP's json_encode

Although I am writing for the first time, I have been a part of this community before. I decided to post my query here because none of the similar questions seemed to offer a clear solution to my specific issue. I am currently working on a tic-tac-toe gam ...

phpjqueryajaxjson

Having trouble adding jQuery variable information through Ajax

When I click a certain button, I am attempting to insert a specific variable string "date" into my database. var date2 = curr_year + "-" + m_names[curr_month] + "-" + curr_date + "T" + curr_hour2 + ":" + curr_min + ":" + milli + " "; var date ...

jqueryajax

Incorporating Angular 2 Templates: Exploring how to bind keydown.arrow event to the entire div rather than just specific

I am currently working on a simple navigator component that includes buttons and a date-picker subcomponent. My goal is to be able to bind keydown.arrowleft etc. for the entire div, which has a CSS style of 100% height and width. Below is the template stru ...

htmlcssangular

The column on the right does not extend all the way to the bottom of the page

Hello, I currently have a website with the following design: I'm looking to extend the right column all the way down to the bottom of the body, even if there's not enough content to push it down. How can I accomplish this using CSS? Here is the ...

csshtml

Executing a Javascript function when a form is submitted

function validateForm() { alert("Form submitted successfully"); return true; } <form onsubmit="return validateForm()" action="add.php" method="post" id="p1"> <center>Add New Survey</center> <p>&nbsp;&l ...

javascriptphpjqueryhtml

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

htmlcssangularjsionic-frameworkmultiple-select