Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other.

I need them to be displayed side by side

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

Here is the code I am using:

<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
    <div class="widget widget-card-two">
        <div class="widget-content">

            <div class="media">
                <div class="w-img">
                    <img src="assets/img/90x90.jpg" alt="avatar">
                </div>
                <div class="media-body">
                    <h6>{{ $tracking->order->shipping_address }}</h6>
                    <p class="meta-date-time">{{ $tracking->order->user->name }}</p>
                </div>
            </div>

            <div class="card-bottom-section">
                <h5>{{ $tracking->order->shipping_method }}</h5>
                <div  class="img-group">
                   <a style="text-decoration: none; background-color: #ffffff;" href="https://api.whatsapp.com/send?phone={{$tracking->order->user->telefono}}&text=Hola" target="_blank">  <img src="https://i.imgur.com/C5L19Q8.png" alt="avatar"> </a>
      
                </div> 
                <a href="{{route('order-show',$tracking->order)}}" class="btn">Ver Pedido N° {{ $tracking->order->id }}</a>
            </div>
        </div>
    </div>
</div>

Can anyone assist me with this?

htmlcssbootstrap-4

Answer №1

To implement a grid layout, simply include the row class in your HTML code:

<div class="container">
  <div class="row">
    <div class="col-sm">
      First column
    </div>
    <div class="col-sm">
      Second column
    </div>
    <div class="col-sm">
      Third column
    </div>
  </div>
</div>

For more detailed instructions, please check out the documentation here: https://getbootstrap.com/docs/4.0/layout/grid/

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

Tips on adjusting the placement of a Bootstrap popover in real-time

Is there a method to adjust the placement/position of Bootstrap's Popover based on the window width? I am utilizing it to present additional form elements and want to display them on the left side, but on mobile devices, they should appear at the top. ...

jquerybootstrap-4popoverpopper.js

Adjusting the Stripe Button to Utilize a Unique Button Class

I have a stripe button on my website and I want to add my custom class to it. I discovered that manually creating the CSS for it can work, but I prefer to maintain consistency across all buttons on my site by using my custom class. No matter what I attemp ...

javascriptjquerycssstripe-payments

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

I need some assistance. Currently, I am facing a challenge. I am trying to retrieve data from one of my React Components named ParameterList. This component contains a React-Bootstrap Form.Control element for numerical input. My goal is to take the value ...

javascriptreactjsbootstrap-4next.jsreact-bootstrap

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar

Press on Selenium with Python

I am experiencing an issue with clicking in Selenium as it is not able to click on the button. Below is the code I am using: from selenium import webdriver import time import click from selenium.webdriver.support.select import Select from selenium.webdriv ...

pythonhtmlseleniumselenium-webdriverwebdriver

Tips for refreshing the 'state' of an Angular Router component

I'm facing an issue with passing data between pages using Angular routing. Everything works as expected when navigating to the "next" page for the first time. However, upon returning to the home page and selecting a different item, the Router's s ...

htmlangulartypescriptionic-framework

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

What could be causing my webpage content to be partially hidden by my CSS menu?

I am currently working on my website which features a CSS menu with my website logo, a text box, and a dropdown. Additionally, I have created a login form using a table like the one shown below. <p>&nbsp;</p><table width="40%" border="0 ...

htmlcss

Analyzing JSON data and creating a tailor-made array

My Dilemma { "rowId": "1", "product_name": [ "Item A", "Item B", "Item C", "Item D", "Item E" ], "product_tag": [ "123456", "234567", "345678", "456789", "5678 ...

javascripthtmljson

Leverage XMPP with the power of HTML5

I have been intrigued by the integration of xmpp (Extensible Messaging Presence Protocol) with html5 and javascript. How can one implement an xmpp chat in html5? ...

htmlxmpp

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Avoid shifting focus to each form control when the tab key is activated

I have a form where users need to be able to delete and add items using the keyboard. Typically, users use the tab key to move focus from one element to another. However, when pressing the tab key in this form, the focus only shifts to textboxes and not t ...

javascripthtmlcssbootstrap-5

Ways to display a checked or unchecked checkbox in react depending on a boolean value obtained from an API

Is there a way to display a checked or unchecked checkbox in react jsx depending on a boolean value retrieved from an api? ...

htmlreactjsjsx

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...

javascriptphphtmljqueryajax

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

Determine if a specific identifier is already present using Javascript or Jquery

Is there a way to determine if an html tag with its specific id is present more than once in the code? This is my pseudocode for checking: if($('#myId').length > 1) { // It exists twice } ...

javascriptjqueryhtmlexists

The height of scrollbars in the HTML section does not extend to full coverage

On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...

htmlcssscrollbar

Displaying a webpage within a div section of another webpage by referencing it from a separate webpage

If I have three html pages named index.html, page1.html, and page2.html. Imagine that I am currently on page2.html and there is a list of items, each linking to different pages. Let's say one item links to page1.html. Is it feasible to load page1.ht ...

javascriptjqueryhtml

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

javascripthtmlhead