Tips on aligning two bootstrap columns side by side

Having trouble aligning my two columns side by side. Despite my efforts, the second column (col-11) keeps appearing below col-1. The image inside col-1 should be on the far left with the other column right next to it.

<div class="container col-md-12 wm-body">

<div class="row" style="margin: 0px;">

    <div class="col-md-12" style="padding-left: 0px;">

        <div class="container-fluid" style="padding: 0;">
            <div class="row wm-card" style="margin: 15px 0 0 0; padding: 0px;">

                <div class="col-md-1">
                    <img src="../../../assets/img/trip.svg" class="icon">
                </div>

                <div class="col-md-11">
                    <table *ngIf="trip" class="table-sm wm-table-drive-orders" style="width: 60%;">

                        <div>
                            <tbody class="col-md-12">
                                <tr *ngIf="firstNode">



                                    <td style="padding-bottom: 0px;">
                                        <b>Datum</b>
                                    </td>

                                    <td style="padding-bottom: 0px;">
                                        <p>{{ tripHelper.getActualTimeStringFromNode(firstNode) }}</p>
                                    </td>

                                    <td style="padding-bottom: 0px;">
                                        <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(firstNode)" [ngStyle]="{'color':
                                        tripHelper.getState(firstNode, true)}"></i>
                                    </td>



                                    <td style="padding-bottom: 0px;">
                                        <p>{{ geographyHelper.getAddressString(trip.addresses[0]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[0])}}
                                        </p>
                                    </td>

                                    <td style="padding-bottom: 0px;">
                                        <b>Tidskrav</b>
                                    </td>

                                    <td style="padding-bottom: 0px;">
                                        <b>Status</b>
                                    </td>
                                </tr>
                            </tbody>
                        </div>
                    </table>

                    <table>
                            <tbody class="col-md-12">
                                <tr *ngIf="lastNode">

                                    <td style="padding-top: 0px;">
                                        <p>{{tripHelper.getDateString(trip)}}</p>
                                    </td>

                                    <td style="padding-top: 0px;">
                                        <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(lastNode)" [ngStyle]="{'color':
                                            tripHelper.getState(lastNode, true)}"></i>
                                    </td>

                                    <td style="padding-top: 0px;">
                                        <p>{{ geographyHelper.getAddressString(trip.addresses[1]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[1])}}
                                        </p>
                                    </td>

                                    <td style="padding-top: 0px;">
                                        <p>-</p>
                                    </td>

                                    <td style="padding-top: 0px;">
                                        <p>{{tripHelper.getStateString(trip)}}</p>
                                    </td>
                                </tr>
                            </tbody>
                    </table>

                </div>

            </div>
        </div>

</div>

The issue might be due to having tables inside the div structure. It's a bit unclear at this point.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The reason for the issue you are experiencing is due to incorrectly nesting the container, row, and col-* elements. Bootstrap recommends using the container as the parent for the row, not nesting it inside another row or col. Additionally, avoid nesting col-* within another col-* unless wrapped in a row. Here is a revised code snippet to enhance clarity.

<div class="container wm-body">

    <div class="wm-card" style="margin: 15px 0 0 0; padding: 0px;">
        <div class="row" style="margin: 0px;">

            <div class="col-md-1">
                <img src="../../../assets/img/trip.svg" class="icon">
            </div>

            <div class="col-md-11">
                <table *ngIf="trip" class="table-sm wm-table-drive-orders" style="width: 60%;">

                    <div>
                        <tbody class="col-md-12">
                            <tr *ngIf="firstNode">

                                <td style="padding-bottom: 0px;">
                                    <b>Date</b>
                                </td>

                                <td style="padding-bottom: 0px;">
                                    <p>{{ tripHelper.getActualTimeStringFromNode(firstNode) }}</p>
                                </td>

                                <td style="padding-bottom: 0px;">
                                    <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(firstNode)" [ngStyle]="{'color':tripHelper.getState(firstNode, true)}"></i></td>

                                <td style="padding-bottom: 0px;">
                                    <p>{{ geographyHelper.getAddressString(trip.addresses[0]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[0])}}
                                    </p>
                                </td>

                                <td style="padding-bottom: 0px;">
                                    <b>Time Requirement</b>
                                </td>
                                <td style="padding-bottom: 0px;">
                                    <b>Status</b>
                                </td>
                            </tr>
                        </tbody>
                    </div>
                </table>

                <table>
                    <tbody class="col-md-12">
                        <tr *ngIf="lastNode">

                            <td style="padding-top: 0px;">
                                <p>{{tripHelper.getDateString(trip)}}</p>
                            </td>

                            <td style="padding-top: 0px;">
                                <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(lastNode)" [ngStyle]="{'color':
                                                                                                                                                                                                            tripHelper.getState(lastNode, true)}"></i>
                            </td>

                            <td style="padding-top: 0px;">
                                <p>{{ geographyHelper.getAddressString(trip.addresses[1]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[1])}}
                                </p>
                            </td>

                            <td style="padding-top: 0px;">
                                <p>-</p>
                            </td>
                            <td style="padding-top: 0px;">
                                <p>{{tripHelper.getStateString(trip)}}</p>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>
    </div>

</div>

Answer №2

If I were to create a similar layout, it would look something like this:

.wm-table-drive-orders td {padding-bottom: 0px;}
.add-on-table td {padding-top: 0px;}

/* COMMON CLASSES */

.no-padding-left {padding-left: 0px;}
.no-padding-right {}
.no-side-padding {}
.no-padding {padding: 0;}

.no-margin {margin: 0;}

.width-40 {}
.width-50 {}
.width-60 {width: 60%;}

/* DEBUG */

.row {background: red;}
.col-md-1 {background: green;}
.col-md-11 {background: blue;}

table td {word-break: break-all;}
<div class="container wm-body">
    <div class="row no-margin">
        <div class="col-md-12">
            
            <div class="row wm-card no-padding" style="margin: 15px 0 0 0;">
                
                <div class="col-md-1">
                    <img src="../../../assets/img/trip.svg" class="icon">
                </div>
                
                <div class="col-md-11">
                    
                    <table *ngIf="trip" class="table-sm wm-table-drive-orders width-60">
                        <tbody class="col-md-12">
                            <tr *ngIf="firstNode">
                                <td>
                                    <b>Datum</b>
                                </td>
                                <td>
                                    <p>{{ tripHelper.getActualTimeStringFromNode(firstNode) }}</p>
                                </td>
                                <td>
                                    <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(firstNode)" [ngStyle]="{'color':tripHelper.getState(firstNode, true)}"></i>
                                </td>
                                <td>
                                    <p>{{ geographyHelper.getAddressString(trip.addresses[0]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[0])}}
                                    </p>
                                </td>
                                <td>
                                    <b>Tidskrav</b>
                                </td>
                                <td>
                                    <b>Status</b>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <table class="add-on-table">
                        <tbody class="col-md-12">
                            <tr *ngIf="lastNode">
                                <td>
                                    <p>{{tripHelper.getDateString(trip)}}</p>
                                </td>
                                <td>
                                    <i class="fa" aria-hidden="true" [ngClass]="tripHelper.getState(lastNode)" [ngStyle]="{'color':
                                        tripHelper.getState(lastNode, true)}"></i>
                                </td>
                                <td>
                                    <p>{{ geographyHelper.getAddressString(trip.addresses[1]) }}, {{ geographyHelper.getPostalAreaString(trip.addresses[1])}}
                                    </p>
                                </td>
                                <td>
                                    <p>-</p>
                                </td>
                                <td>
                                    <p>{{tripHelper.getStateString(trip)}}</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Check out the JSFiddle for an interactive demo: https://jsfiddle.net/aq9Laaew/7925/

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

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

cssreactjsnext.js

Obtain and display pictures in HTML

I am working on a code snippet that fetches images from a directory and displays them in HTML. The issue I'm facing is that the images in the directory keep changing every second, causing problems on mobile browsers where the cached images are not bei ...

javascriptandroidhtmlimageviewer

Is there a way to switch out the WordPress page title for an image instead?

I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images. The current state is as follows ...

csswordpressimageparent-child

Issue with jQuery click event not triggering on dynamically created input boxes for removal

Having some trouble with the remove buttons not working on dynamically generated text boxes. The click function doesn't seem to be triggering, and I'm a bit stuck. Any ideas on what might be causing this issue? Take a look at the following co ...

javascriptjqueryhtmlcssclick

Using a JavaScript code to integrate data input and dropdown menu selections

I am currently working on a data input section on my website. Users will need to enter their name in a text field and then select either "Yes" or "No" from a dropdown menu. Once they click on the 'Generate' button, all the information along with ...

javascriptjqueryhtml

What could be causing the background-color in Chrome Dev Tools to appear faded instead of crossed out?

I have a few queries to share. I noticed that the background of my menu bar is white, but when I remove a specific class from an element further down on the page, the menu bar turns black. I am perplexed as to why changing the style of an HTML section elem ...

cssbootstrap-4google-chrome-devtools

Alternative to CSS Clip path for creating an accordion styling

I'm attempting to create an accordion that expands from the view shown below. https://i.sstatic.net/D3LJP.png To. https://i.sstatic.net/cjG6z.png It should open or close by clicking on a 'Project' thumbnail, which is displayed in the top ...

htmlcssresponsive-design

When clicking on the Bootstrap navbar after implementing the onclick functionality, the color changes to

I was having no issues with my navbar until I introduced an onclick function to it. Here is the code for my onclick function: $('.nav li a').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/ ...

htmlcsstwitter-bootstrapnav

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

Looking for assistance with CSS selection: <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <div class="numCellWrapper"> ... When defining a css selector, how can I target a specific element among multiple elements of the same ...

cssselenium

Retrieve the updated text content from a textarea using JavaScript/jQuery

For a beginner in javascript and jquery like me, I encountered an issue with a textarea element that has preset content. When I change the value on the site to "new" and click the "showme" button, the alert box displays the preset value instead of the new ...

javascriptjqueryhtmlformstextarea

Learn how to utilize AngularJS to create dropdown menus within data cells of an HTML table

I am working on populating rows in an HTML table based on the response I get from AngularJS. My goal is to have one of the table data cells formatted as a dropdown menu. Specific Requirements: The dropdown menu should include three values (A, B, and C). ...

htmlangularjs

Issue with Firefox when combining text-transform and text-overflow properties

Hope everything is going well. I encountered a challenging issue that I need help with (please run the snippet using firefox on Windows or Linux) : <html> <head> <style> .content { backgro ...

htmlcssfirefox

Tips for combining multiple fields into a single variable in PHP

When I click the submit button, the image source does not show any result but the image color is displayed. Any help would be greatly appreciated. <div class="form-group"> <input type="file" name="images[source][]" class="form-control input-l ...

phphtmlmysql

Concealing the .html extension within hyperlinks

If I have a link on my website located at public_html/index.html like this: <a href="pictures/index.html">Link to picture</a> When clicking the "Link to picture" link which leads to a folder using index.html file, the URL displayed in the add ...

htmlhyperlinkhide

Angular Digest Loop for Dynamic Photo Grid Styling

I have a special filter that alters the objects being filtered. However, when I apply ng-style="item.gridSize", it triggers my custom grid algorithm. This algorithm was adapted for my requirements from a source found at this link. angular.module("custom.m ...

javascriptcssangularjsangularjs-directiveangularjs-scope

Adjust the background color using jQuery to its original hue

While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a men ...

javascriptjqueryhtmlcssasp.net

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

javascripthtml

What is the process for transforming a Typescript source file into JavaScript?

I have a basic HTML file with a script source set to index.ts. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge ...

htmltypescriptparceljs