Center-aligned footer with a sleek right border in Bootstrap 4.1.1

Presenting my design concept for the footer:

https://i.sstatic.net/kxdXJ.png

Here is the code snippet for the footer design utilizing Bootstrap 4.1.1:

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}
...

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">
...
</div>

Encountering a challenge with right alignment in the footer bar while the text remains left-aligned.

Appreciate any assistance or insights.

javascripthtmlcssbootstrap-4

Answer №1

To center-align the content, you can convert the column into a flex container by adding the class d-flex and using justify-content-center.

Furthermore, the pseudo-element responsible for creating borders has been updated as demonstrated below:

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 18px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  width: 75%;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

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

Transforming FormData string key names into a Json Object that is easily accessible

Recently, I encountered an issue where my frontend (JS) was sending a request to my backend (Node Typescript) using FormData, which included images. Here is an example of how the data was being sent: https://i.stack.imgur.com/5uARo.png Upon logging the r ...

javascriptnode.jstypescript

Stopping React component click event from bubbling up to document

How do I prevent a click event in a React component from bubbling up to the document? There seems to be an issue that needs fixing! Let's see if we can resolve it on our own. I have a box component with a click event listener, and some link compone ...

javascriptreactjsclick

Numbering the items in ng-repeat directive

I am facing a challenge with my AngularJS directive that is recursively nested within itself multiple times. The issue lies in the fact that the names of items in ng-repeat conflict with those in the outer element, causing it to malfunction. To illustrate ...

javascriptangularjsnaming

Flask not serving Favicon and images to a React application

I am currently working with a Flask server and have it set up in the following manner: app = Flask(__name__, static_folder="dist/assets", static_url_path='/assets', template_folder="dist") ...

javascriptpythonhtmlreactjsflask

Dynamically allocate a controller to an element following the Bootstrap process

I have a unique AngularJS application that is initialized manually at a specific time. Later on, I need to display an HTML element without any ng-controller assigned to it. Is there a way to dynamically add an ng-controller to this element in order for it ...

javascriptangularjsng-controller

create a gentle appearance for an element

I am looking to replicate the visual appearance of each page on this particular website: There is something about the lighting that I really admire. I have attempted to recreate the animation, but I have been unsuccessful in my attempts. Any assistance wo ...

cssanimation

Experiencing issues with the functionality of jQuery AJAX?

I am experiencing difficulties with a jQuery AJAX post. Here is the code: <script> var callback = function(data) { if (data['order_id']) { $.ajax({ type: 'POST', url: '<?php echo $_SERV ...

phpjavascriptajax

Track the number of views each month using PHP and MySQL to generate dynamic jQuery charts

I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...

javascriptphpjquerymysqlchart.js

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

I have recently completed the construction of a carousel with swipe/touch functionality and control buttons for previous and next slides. However, I am facing an issue with the behavior of the carousel as it seems to be sliding by 2 or 3 instead of one at ...

javascriptjquerycsshammer.js

Retrieve information using PHP with AJAX without revealing it on the screen

Is it feasible to fetch data using Ajax in PHP and store them in a JS variable without displaying it? I require this data for date manipulation but do not want to show it. When I attempted to merely return the data without echoing it, the Ajax data in JS ...

javascriptphpajax

Collection of items consists of identical objects repeated multiple times

Multiple objects are being created and then pushed into the array objArr: var objArr = []; var obj = {}; var height = [9,8,7,3,6,5,2,4]; for (var i = 0; i < 8; i++) { debugger; var mountainH = height[i]; obj.h = mountainH; obj.index = i; o ...

javascript

Tips for Switching Button Class Triggered by Click Event

I have 2 buttons and I would like to indicate the active button by changing the button class. I attempted to achieve this using removeClass and addClass but encountered an error. Error: removeClass is not a function .component.html <div class="col" ...

angularbootstrap-4

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

javascriptjqueryhtml

Is it advisable to use Angular $resource JSON Callback if it's not functioning correctly?

I am in the process of creating a resource to send data to my controller for an existing API that I need to connect with. Unfortunately, I do not have the ability to make any changes on the backend. Current state of my Resource factory: 'use strict& ...

javascriptjsonangularjs

Setting intervals to change background images resulted in a delay

I've been working on creating an animation that switches between 2 images used as the background image of a div. Here's the code snippet I've been using: var spacecraftInterval = setInterval(function() { if (access == true) { var image ...

javascripthtmljquerycssbrowser

Using AngularJS translation capabilities with UI Router

I am working on an AngularJS application that utilizes the AngularJS Translate library from . The setup includes UI router to maintain the existing URL structure of the website, which has been indexed by Google with various language versions such as www.do ...

javascriptangularjsangular-ui-routertranslationangular-translate

Encountering issues with reading undefined properties while working with react-chartjs-2 and chart js

Having trouble with react chartjs errors? Visit the link for more details https://i.stack.imgur.com/lI2EP.png The versions I'm using are ^3.5.0 for chart.js and ^4.0.1 for react-chartjs-2 Tried downgrading to version 2 but it didn't solve the ...

javascriptreactjschart.jsreact-chartjs-2

The Ajax post function is not functioning as expected

Here is my code: $.ajax({ type: "POST", url: "mailyaz.php", data: { name: "testest" } }); Currently, the code works with a simple message of "testest". However, I am trying to post my javascript variable (var mysubjec ...

phpjavascriptjqueryajax

Issue with Chrome not triggering onMouseEnter event when an element blocking the cursor disappears in React

Important Note: This issue seems to be specific to Chrome Currently, React does not trigger the onMouseEnter event when a blocking element disappears. This behavior is different from standard JavaScript events and even delegated events. Below is a simpli ...

javascriptreactjsgoogle-chrome

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

HTML: <ul class="tickboxes"> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i></li> <li><i class="fa fa-check"></i>< ...

javascripthtmljquery