What is the best way to line up the columns of various divs?

Is there a way to align the content of these different divs?

I'm trying to match up the headers of each column with the corresponding items in the divs below. Can someone assist me in achieving this alignment?

row-header-course should align with course-name

row-header-progress should align with course-progress

row-header-remaining should align with course-remaining

row-header-timestamp should align with course-timestamp

All elements should be aligned to the left.

Below is the code snippet:

<div class="row historico">

        <div class="row row-header col-md-12">
            <div class="row-header-course col-md-4">Course</div>
            <div class="row-header-progress col-md-2">Progress</div>
            <div class="row-header-remaining col-md-2">Remaining</div>
            <div class="row-header-timestamp col-md-2">Last Viewed</div>
            <div class="row-header-remove col-md-2">Remove</div>
        </div>

            <div class="row-history col-md-12">
                <div class="course-row row">
                    <div class="course-name col-md-4">
                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                        <a href="https://www.xxx.com.br/course-test-4">Test Course 4</a>
                    </div>
                    <div class="course-progress col-md-2">
                        <div class="course-progress-bar-wrapper col-md-8">
                            <div class="course-progress-bar" style="width: 100%;">&nbsp;</div>
                        </div>
                        <div class="course-progress-percent col-md-4">100%</div>
                    </div>
                    <div class="course-remaining col-md-2">Complete</div>
                    <div class="course-timestamp col-md-2">20 hours ago</div>
                    <div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
                </div> <!--  .course-row -->
                <div class="unit-row">

                    <div class="row single-unit">
                        <div class="unit-name col-md-4">
                            <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                            Test Course 4 - Unit 2
                        </div>
                        <div class="unit-nbsp col-md-4">&nbsp;</div>
                        <div class="unit-timestamp col-md-2">20 hours ago</div>
                    <div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
                    </div>

                </div> <!--  .unit-row -->
            </div> <!--  .row-history -->

</div>

EDIT:

Current layout: https://i.sstatic.net/XTHdo.jpg

Desired layout: https://i.sstatic.net/AFMut.jpg

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Below is the code structure you should follow. Please let me know if this is not helpful. I have only implemented it for 2 columns at the moment.

Also, here is a link to a working JS Fiddle: https://jsfiddle.net/tdxje0su/1/

                <div class="row row-header col-md-12">
                    <div class="row-header-course col-md-6">
                        <div class="col-md-12">
                            Course
                        </div>
                        <div class="course-name col-md-12">
                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                            <a href="https://www.xxx.com.br/curso-teste-4">Course Test 4</a>
                        </div>
                    </div>
                    <div class="row-header-progress col-md-2">
                        <div class="col-md-12">
                            Progress
                        </div>
                        <div class="course-progress col-md-12">
                            <div class="row">
                                <div class="course-progress-percent col-md-12">100%</div>
                            </div>
                        </div>
                    </div>
                    <div class="row-header-remaining col-md-2">
                        <div class="col-md-12">
                            Remaining
                        </div>
                        <div class="course-remaining col-md-12">Complete</div>
                    </div>
                    <div class="row-header-timestamp col-md-2">
                        <div class="col-md-12">
                            Last Viewed
                        </div>
                        <div class="course-timestamp col-md-12">19 hours ago</div>
                    </div>
                </div>

            </div> <!-- .history -->

Answer №2

Understood it through this solution:

.course-progress, .course-remaining, .course-timestamp, .course-remove, .unit-nbsp, .unit-timestamp, .unit-remove {
    padding: 0 !important;
}

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

"Adjust the orientation of a video and ensure it properly fills the screen with CSS styling

Below is the CSS style being used: video { position: absolute; transform: rotate(90deg); width: 100%; height: 100%; z-index: 4; visibility: visible; } This code snippet demonstrates a video element: <video id="myVideo" ...

htmlcssvideomp4

Styling elements with Css Flex in a single row

Hi there, I'm currently working on a project and I'm facing an issue with aligning all the items in the same row. I've attempted to use flexbox but the items end up overlapping each other and I'm unsure of how to resolve this issue. To ...

cssreactjsmaterial-uiflexbox

Dynamic Select Option housing Bootstrap Popover

I am attempting to create a popover that generates dynamic content and reacts when an option is selected. On my page, I have a select element and one of the options should trigger a popover containing a form with 'Accept' and 'Cancel' ...

jqueryhtmltwitter-bootstrap

Utilize an array with dynamic referencing

I am attempting to reference a single index out of 30 different indices based on the user's actions, and then utilize ng-repeat to iterate through each item in the index. Controller: $scope.meals = [ { title: 'Abs', url:"#/app/mworkout ...

javascripthtmlangularjsionic-framework

Arrangement within a span

I've been refreshing my HTML/CSS skills in preparation for a new job opportunity. The last time I dabbled in HTML was way back in 1999... Needless to say, I've fallen quite behind. As a big fan of the "Space Trader" game on Palm OS, I've tak ...

htmlcssweb

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

"Carousel indicator navigation malfunctioning in bootstrap slider with unresponsive click behavior

I'm currently working on modifying the code below. I've managed to separate the indicators from the bootstrap carousel. Everything seems to be functioning well, except for one issue - when I click on the list of indicators, although the image cha ...

jquerytwitter-bootstrap

Tips for preserving an HTML dynamic table in a database

I have a challenge where I am generating a dynamic HTML table using javascript. What is the best way to store this dynamic HTML table in a database using CodeIgniter? This is the code snippet for my input form: <table id="tb3" name="tb3"> & ...

javascriptphphtmlcodeigniter

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

My file structure is organized as follows: The main file is located in the folder "HTML-Project/index.html". Within this folder, I have my style.css file and two other folders: one for pictures (HTML-Project/pictures) and another for categories (HTML-Proje ...

htmlcsswindowsfileserver

Change the background color of a Bootstrap dropdown when toggled

I recently created this code snippet: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdo ...

htmljquerycssbootstrap-5

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

javascripthtmlfunctionfirefoxhtml-table

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

javascripthtmlcssreactjstypescript

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

phphtmlcssyii

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

htmlcssplayframework

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

cssrshiny

Using Python with Selenium, attempt to click on a button designated as type="button"

I've been trying to click on a button in this Airbnb listing but none of the codes I tried seem to work. Here is one example of the HTML code: <li data-id="page-2" class="_1eqazlr"> <button type="button" class="_1ip5u88" aria-label="Page 2 ...

htmlpython-3.xselenium

I seem to be having some trouble with my navigation roll-over menu bar, as

Help! I'm having trouble getting my navigation bar to properly overlap the main content on my website. If you could take a look here: that would be greatly appreciated. Please disregard the header position for now, as I am still deciding on its place ...

htmlcssnavbar

Firefox is not rendering HTML5 elements properly

While my website performs well in Chrome and Safari, there seems to be an issue with how elements are displayed in Firefox or IE. Some elements are being pushed to the right, and I am unsure of how to fix this problem. You can view the site here To aid i ...

jquerycsshtml

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

csshtmlcss-position