Ensuring column content is perfectly aligned using Bootstrap 4

I'm attempting to use bootstrap to align rows and columns in my html so that it resembles the layout shown in this image....

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

I experimented with code like this...

<div class="container"> 
<div class="row">
  <div class="col-sm-2"><span><strong>Data</strong></span></div>
  <div class="col-sm-1">Information</div>

  <div class="col-sm-2 offset-sm-12"><strong>Date due</strong></div>
  <div class="col-sm-1 offset-sm-12">11/28/2017</div>      
</div>

However, I am struggling to achieve the correct alignment. Could someone assist me in achieving a similar alignment for the first row as shown in the image?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure the text is properly aligned in the columns, use the text-right class. Remember that using offset will only shift the columns, not align their contents.

<div class="container">
    <div class="row">
        <div class="col-sm-3 text-right"><span><strong>Data</strong></span></div>
        <div class="col-sm-2">Information</div>
        <div class="col-sm-3 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2">11/28/2017</div>
    </div>
</div>

For more information on text alignment in Bootstrap, refer to the official documentation.

Answer №2

You have mistakenly used the offset-* class incorrectly. Instead of offset-*-12, please refer to the corrected code below.

<div class="container"> 
    <div class="row">
        <div class="col-sm-2 text-right"><strong>Data</strong></div>
        <div class="col-sm-2">Information</div>

        <div class="col-sm-2 offset-sm-4 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2 offset-sm-4">11/28/2017</div>
    </div>
</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

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...

javascripthtmlcssthree.js

What is the best way to align an image in a particular div based on the current position of the viewport

I want to add a sleek animation while loading content using ajax. My goal is to display an icon while the "Content" div is reloading, but I'm not sure if this can be achieved with just CSS. The icon needs to: Always be horizontally centered within ...

ajaxcssjquery

What steps should I take to troubleshoot and resolve this PHP, AJAX, and JavaScript dilemma

Hey there, I'm new to PHP and currently working on creating a form with a dropdown list option that pulls data from my database. My goal is to have the selected option display the related details in the text field for the user. In my database, I have ...

javascriptphphtmljqueryajax

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

What measures can be taken to safeguard my web app from unauthorized devices attempting to connect?

I am looking for a way to restrict access to a webapp so that only authorized users can connect from approved computers or mobile devices. If a user enters the correct username and password, access will be granted only if they are using a device approved b ...

javascriptasp.nethtmlvb.net

An alternative to Beautiful Soup for Python 3.2

Looking to create a web crawler for extracting information from various web pages, I discovered Beautiful Soup which seemed like an excellent tool. It allows me to parse entire documents, create dom objects, iterate through them, and extract attributes sim ...

pythonhtmlweb-crawler

Chrome experiencing problems with placeholder text fallback event

My text field has a placeholder text that says "First Name". When the user clicks on the field, the text disappears and allows them to type in their own text. HTML <input class="fname" type="text" placeholder="First Name"/> JS function handlePlac ...

javascripthtmlgoogle-chromeplaceholder

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

htmlcssangulartypescript

The combination of jQuery and HTML FormData triggers an error message of "Uncaught TypeError: Illegal invocation."

I have been utilizing a particular script to upload my image files. You can find the script here: http://jsfiddle.net/eHmSr/ $('.uploader input:file').on('change', function() { $this = $(this); $('.alert').remove(); $ ...

jqueryajaxhtmlupload

Are there any available polyfills for downloading links using data URIs?

My issue involves generating code from the server: <a download="test.csv" href="data:text/plain;charset=utf-8;base64,w4FydsOtenTFsXLFkXTDvGvDtnJmw7p0w7Nnw6lwLg=="> teszt </a> This solution currently works with Chrome, Firefox, and Opera. ...

javascripthtmlpolyfills

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

What is the process for modifying information within a text document?

What I am trying to achieve is a ticker with two buttons that can increment or decrement the value by one each time they are clicked. In addition, I want this value to be synced with a number stored in a text file. For instance, if both the counter and t ...

javascriptphphtml

Make an image vanish once a table has been loaded using jQuery

I am striving to achieve a loading gif display upon button click and then vanish once the div loads with information from a jQuery function. Unfortunately, the page doesn't load, ruling out the use of the .load option. I am struggling to find an alter ...

jqueryhtmlloading-image

How can I apply justify-content exclusively to the first row with Bootstrap 4?

I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties col-xl-3 col-lg-4 col-md-6 col-sm ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Implementing dynamic CSS class addition on CodeIgniter web pages

Exploring the templating mechanism I use in my CodeIgniter application: public function index($page = 'login') { $this->load->view('admin/header',array('page'=>$page)); $this->load->view(&a ...

phpcsscodeigniter-3

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

phphtmlajaxpdf

Ways to prevent a <button> in a Visual Studio form from triggering a server postback

I am currently working on developing a web page in Visual Studio 2017 that utilizes the Bootstrap modal for displaying popups. I have encountered an issue where, if I place the button for triggering the modal inside the ASP.NET form, the modal opens brie ...

visual-studiobootstrap-4

Current polyfill available for requestAnimationFrame

Recently, I read on that requestAnimationFrame in Chrome 20 now has a new sub-millisecond precision timer. It looks like I need to update my code to accommodate this change. After checking out various polyfills, it seems like they were created before thi ...

javascripthtmlrequestanimationframe

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

javascriptjqueryhtmljson