Bootstrap - aligning arrays of columns with varying widths

Struggling to align 5 varied-width Bootstrap columns in the center of the page? The new flex/grid features should make it possible, but something seems to be missing. Take a look at this image from the FF inspector for reference: https://i.sstatic.net/q4utW.png

The issue appears to be with the right side of the blue area, which is longer than the left side. Everything else seems symmetrical.

Below is the Bootstrap HTML used to create the layout:

<div class="row">
  <div id="copyDateText" class="row col-sm-8 offset-sm-2 mx-auto text-center">
  <div class="col-sm-auto">
    About Us
  </div>
  <div class="col-sm-auto">
    Site Map
  </div>
  <div class="col-sm-auto">
    View our Privacy & Terms
  </div>
  <div class="col-sm-auto">
    Security
  </div>
  <div class="col-sm-auto">
    <span style="vertical-align:top;">&copy;2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span>
  </div>
</div>

If the issue lies within col-sm-8 offset-sm-2, there may be another way to center the content effectively without sacrificing alignment.

htmlcssbootstrap-4

Answer №1

To easily correct this issue, you can utilize flex box. Below is a working example that you can simply copy and paste into an .html file to resolve the problem:

<!DOCTYPE html>
<!-- This code flattens the array using Javascript and HTML5 -->
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
</head>

<body>
    <div class="row">
        <div id="copyDateText" class="col-sm-8 d-flex justify-content-center mx-auto offset-sm-2 row text-center">
            <div class="col-sm-auto">
                About Us
            </div>
            <div class="col-sm-auto">
                Site Map
            </div>
            <div class="col-sm-auto">
                View our Privacy & Terms
            </div>
            <div class="col-sm-auto">
                Security
            </div>
            <div class="col-sm-auto">
                <span style="vertical-align:top;">&copy;2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span>
            </div>
        </div>
</body>

</html>

By adding the classes d-flex and justify-content-center, you can see how it resolves the issue. If you have any more questions, feel free to reach out.

Answer №2

To enhance the layout, insert another row within the #copyDateText div and apply margin: auto to that row.

Your HTML structure will resemble this (you may need to maximize the width to view the entire menu):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
  <div id="copyDateText" class="row col-sm-8 offset-sm-2 mx-auto text-center">
    <div class="row" style="margin:auto;">
      <div class="col-sm-auto">
        About Us
      </div>
      <div class="col-sm-auto">
        Site Map
      </div>
      <div class="col-sm-auto">
        View our Privacy & Terms
      </div>
      <div class="col-sm-auto">
        Security
      </div>
      <div class="col-sm-auto">
        <span style="vertical-align:top;">&copy;2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span>
      </div>
    </div>
  </div>
</body>
</html>

Afterwards, remember to incorporate the inline CSS into your stylesheet for a polished appearance.

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

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

Guide to turning off the pinch-zoom feature on Windows 8 laptops

I'm currently working on a Windows 8 desktop application where I am using C#, JavaScript, and HTML5. Specifically in the C# portion, I am utilizing the WebView object. My goal is to disable pinch-zoom within my application. I already know how to achi ...

c#htmlinternet-explorerwindows-8internet-explorer-10

How can you tap into local storage in CSS while utilizing a chrome extension?

Can I access local storage from a Chrome extension's options file using CSS? Is it possible to use JavaScript to define a variable that can be utilized in CSS, or is local storage only accessible through JavaScript? If local storage is restricted to J ...

javascriptcssgoogle-chromegoogle-chrome-extensionlocal-storage

Deactivated jQuery contextMenu following a mouseup event

Having an issue with my jQuery custom text-selection function disabling the contextMenu event. Here is a simple example with javascript and an html file: var markFeature = { getSelected: function(){ var t = ''; if(window.getSelectio ...

javascriptjqueryhtmlcontextmenu

Ensure that the text stays aligned at the center within an `<li>` tag, especially when there is an image along with the text within the element

I have a basic list structured like this: <ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> <li><hr&g ...

htmlcsshtml-lists

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

Elegant container showcasing a single stunning image

Currently, I am using fancy box for my photo gallery but I am facing an issue where two images need to be uploaded - one for the Thumbnail and another for fancy box. <a style="display: block;" class="fancybox imgContainer" href="images/lorenteJerome_ba ...

jqueryhtmlcss

Enhancing the responsiveness of images compared to regular images by resizing and locking them in place

I'm struggling with adjusting the responsiveness of my icons around the main wheel to changes in page size. Currently, they are not staying put relative to the middle wheel when the page size increases or decreases. I also need the wheel and icons to ...

htmlcssresponsive-designbootstrap-4

CSS style for tables with inner gutters only

I am attempting to create a table layout with spacing between cells but without any external space for the cells at the border. I have written a simple code snippet to illustrate my issue: html, body, div, table, caption, tbody, tfoot, thead, tr, th, td ...

css

A comprehensive guide on incorporating Jest for testing localStorage

I have attempted to mock localStorage following the advice from another source, but I am struggling to get the tests to pass despite several attempts. Below is the code for the localStorage mock: class LocalStorageMock { constructor() { this.stor ...

javascripthtmlunit-testinglocal-storagejestjs

Send image data in base64 format to server using AJAX to save

My goal is to store a base64 image on a php server using the webcam-easy library (https://github.com/bensonruan/webcam-easy). I added a button to the index.html file of the demo: <button id="upload" onClick="postData()" style=" ...

javascriptphphtmlajaxbase64

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

javascriptjqueryhtml

Refresh your HTML page automatically while keeping the scroll position and functioning with anchors

I am currently facing an issue with a web service that generates HTML and I need it to automatically refresh in the browser every 10 seconds. Initially, I used the <meta http-equiv="refresh" content="10"> method which worked successfully, maintaining ...

javascripthtmlpage-refresh

Having trouble importing Google Fonts using Styled Components and Next.js?

I encountered an issue while attempting to load Google Fonts. I came across a solution that suggests adding the following code snippet in _document.js to import it within a head tag: import React from 'react'; import Document, { Html, Head, Main, ...

cssreactjsnext.jsserver-side-renderingstyled-components

Styling with CSS: A guide to reducing paragraph margins within a div element

My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I ...

javascripthtmlcssmarginappendchild

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

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

I possess the source code for a JavaScript/HTML5 application that operates on the client-side and manages the transmission/reception of audio and video data streams to/from a server. My objective is to develop a C++ application that fully integrates the c ...

javascriptc++htmlwebsocketqtwebkit

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Placement of Search Bar

After integrating a search bar into my website using code injection points, I am now attempting to relocate it below my site's tagline. The screenshot below illustrates what I am aiming for. You can visit my website at www.jobspark.ca <script typ ...

csssearchwebsquarespace

Establishing a pixel width for a cell within a table

I've encountered an issue where setting a width to a div with the display: table-cell property is not working as expected. Here is my code: <header class="header layers"> <div class="wrap"> <h1 i ...

htmlcss