Centered offsetting with Bootstrap 4


I am looking to create a column that is centered on the page, with another column slightly offset from it, without affecting the center alignment.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
    <div class="row justify-content-center">
        <div class="col-auto">
            <ul class="list-inline">
                <li class="list-inline-item">Lorem ipsum</li>
                <li class="list-inline-item">Lorem ipsum</li>
                <li class="list-inline-item">Lorem ipsumus</li>
                <li class="list-inline-item">Lorem ipsum</li>
            </ul>
        </div>
        <div class="col-3 offset-1">test</div>
    </div>

Image: https://i.sstatic.net/BTEuP.png
How can I achieve this in Bootstrap 4?

htmlcssbootstrap-4

Answer №1

If I get your question correctly, you are looking to center the block where the list is located horizontally at all times?

Initially, the offset block should have a class of col-3, with an offset of offset-1, totaling 4 columns. In order to center the list block, there must be a 4 column block on its left as well. Therefore, the list block should occupy 4 columns, i.e., col-4.

<div class="row">
    <div class="col-4 ml-auto">
        <ul class="list-inline">
            <li class="list-inline-item">Lorem ipsum</li>
            <li class="list-inline-item">Lorem ipsum</li>
            <li class="list-inline-item">Lorem ipsumus</li>
            <li class="list-inline-item">Lorem ipsum</li>
        </ul>
    </div>
    <div class="col-3 offset-1">test</div>
</div>

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

Sample: https://jsfiddle.net/aq9Laaew/91196/

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

problem with nivo slider causing content to overflow

My webpage is using nivoslider to display images. However, I am facing an issue where the images are overflowing one by one until the page fully loads. I have tried setting the overflow:hidden property in the CSS but it doesn't seem to correct the pro ...

csshtml

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Learn how to assign an ID to a React component in order to access it using the document.getElementById() method

After going through multiple inquiries, my understanding led me to believe that simply setting the id as shown below would suffice: <MyComponent id="myId"/> However, upon invoking document.getElementById() on the specified id, I receive a null resu ...

javascripthtmlreactjs

What is the best way to complete a CSS animation and load a new URL simultaneously?

I was thinking of incorporating a series of fade-ins, followed by a fade-out, and concluding with the loading of a new page (target=self). After some research online, it appears that CSS animations do not include the functionality to fetch a new URL as the ...

jqueryhtmlcss

issue with jquery fade toggle not working properly on Bootstrap website

My website is built using Bootstrap and jQuery. I am facing an issue where the fadeToggle() function on a div element is not displaying properly - it remains hidden all the time. Can anyone provide insight into what might be causing this problem, or sugg ...

jqueryhtmltwitter-bootstrap

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

I'm curious as to why the web browser is showing a timestamp below the image I have on my HTML page

Issue at Hand: I am currently working on coding a website that involves displaying an image. However, when the image is loaded, a timestamp appears underneath it in the web browser. Query: Could you please shed some light on why a timestamp is showing up ...

html

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

What is the reason behind the Chrome icon flickering momentarily while loading certain web pages?

I recently put together a basic html document, here it is: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <title>Just a test.</title> </head> <body> <svg ...

htmlgoogle-chrome

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

javascripthtmlbrowsercross-browseruser-experience

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

javascripthtmlangular

What is the correct way to cite an inner class?

Exploring the world of Material UI styling for the first and probably last time, I find myself in a bit of a bind. In my current code setup, I have a question regarding the following structure: .map(section => ( <Section className={classNames(clas ...

cssreactjsmaterial-uijsx

Red X appearing in IE9 for HTML5 Video

It's strange that my video works on some browsers but not others, even though I'm using mp4, ogv, and webm formats. Even weirder is that some videos work while others don't. To illustrate the issue, I've created a jsfiddle for you to c ...

htmlvideointernet-explorer-9

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...

javascripthtmlcssreactjstypescript

Convert HTML tr elements into a PHP array

After realizing that my previous thread lacked clarity, I decided to delete it and start fresh. In my php script, I send a cURL request to a website which generates an HTML table. This table contains 7 TR elements, each containing 6 TD elements. Essentia ...

phphtmlarrayshtml-table

Getting all inline styles from an HTML string using JavaScript

(JavaScript) I am working with an html email template stored as a string. Is there a way to extract all the inline styles used in the template? For instance, if I have this input: <div style="min-width:300px;max-width:600px;overflow-wrap:break-word ...

javascripthtmlcssregex

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

javascripthtmlxmlinnerhtml