How to align text to the left in Bootstrap 4 with equal column widths reminiscent of a

Below is a snippet of code that creates a list of links:

<h3>Hours</h3>
<div class="hours-display pb-2">
  <div class="mb-0"><span class="mr-2"><strong>Mon</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Tue</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300"></div>
  <div class="mb-0"><span class="mr-2"><strong>Wed</strong></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span><a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300"></div>
</div>

To see the final layout, click on this image https://i.sstatic.net/RN0ab.png

Is there a way to align the columns vertically in a more precise way?

cssbootstrap-4

Answer №1

To enhance the layout, I would suggest structuring it differently, like the example below. We can create an outer flex div with children that are flex-column, allowing the information to flex vertically rather than the default horizontal.

It is important to note that the second div containing the hours should have divs wrapping around the hours and accompanying spans. This is necessary because there are more than one child element. By wrapping them in divs, the direct child of the second d-flex div can be aligned correctly.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Hours</h3>
<div class="d-flex hours-display pb-2">
  <div class="d-flex flex-column">
    <span class="mr-2"><strong>Mon</strong></span>
    <span class="mr-2"><strong>Tue</strong></span>
    <span class="mr-2"><strong>Wed</strong></span>
  </div>
  <div class="d-flex flex-column">
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
    <div>
      <span></span><span class="mr-1">9:30</span><span class="mr-1">-</span><span>23:00</span></span>
    </div>
  </div>
  <div class="d-flex flex-column">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="0 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="1 0930 2300">
    <a class="ml-3" href="#">Remove</a><input type="hidden" name="BusinessHours" value="2 0930 2300">
  </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

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Is there a way to temporarily omit specific classes within HTML (<div class="" ...>)? For instance: <div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0"> In this s ...

htmlcss

Create an element that can be dragged without the need to specify its position as absolute

I am having an issue where elements I want to drag on a canvas are not appearing next to each other as expected. Instead, they are overlapping: To make these elements draggable, I am utilizing the dragElement(element) function from https://www.w3schools.c ...

javascripthtmlcsspositiondraggable

Troubleshooting problem with autoplay on a Parallax Content Slider in IE8

Does anyone know how to hide the arrows on pictures in IE8 when the mouse is not hovering over them? I've been struggling to find a solution and would really appreciate some help. ...

javascriptjquerycssinternet-explorerinternet-explorer-8

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

phphtmlcssresponsive

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

javascripthtmlcssangulartypescript

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

ioscssangulartypescriptionic-framework

What is the most effective way to incorporate animated hyperlinks?

I've been grappling with a webpage I'm designing, featuring sentences acting as links arranged in inline-block format. My goal is to create an animated effect that resembles twinkling stars, pausing the animation on hover. It feels like I'm ...

jquerycssanimation

creating a stunning video background that spans 200 viewport heights

My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the backgrou ...

htmlcss

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

jquerycssslider

Making a Dialog resizable with jQuery's Resizable Helper

Is there a way to implement the Helper feature from jQuery Resizable, which only shows a frame while resizing the container, in a Dialog? ...

javascriptjquerycssjquery-ui-resizable

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

I have been following the bootstrap documentation for tabs which can be found at this link After referencing the documentation, I replicated the sample implementation in my code as shown below: --- title: Portfolio description: Portfolio --- {% exten ...

javascripthtmlcssbootstrap-5nunjucks

Using the jQuery method `fadeToggle` to handle the functionality of multiple buttons toggling hidden text

I am struggling to make fadeToggle work properly. I want to reveal text when clicking on another div. Since I plan to use this for multiple elements, I am looking for a smart and efficient way to handle them all. Here is my current attempt which does not ...

jqueryhtmlcss

Troubleshooting problem with table reflow in Bootstrap v4.0.0-alpha.3 on mobile devices

I am having trouble fixing the table-reflow issue in mobile view while trying out the code below. Any suggestions on how to resolve this would be greatly appreciated. Check out the image here To see the code, visit CODEPEN <div class="container"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

cssreactjsmaterial-ui

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

htmlcss

When scrolling, the selected text does not maintain its correct position

I'm looking to enable my users to search by selecting text. Once they select text, a new button will appear on the right side of the selected text giving them the option to search or not. However, when the user scrolls to the bottom of the page, the p ...

javascripthtmlcssangularjs

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Pleas ...

javascripthtmlcssreactjsmaterial-ui

Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...

javascriptjqueryhtmlcss