Creating a horizontal scrollbar in columns using Bootstrap can be accomplished by adjusting the CSS properties

Having a container created with boostrap:

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

The question at hand is how to implement horizontal scrolling in order to maintain the aspect ratio of the initial image within the container on phone resolutions.

Here is the container displayed in phone resolution:

https://i.sstatic.net/8Qqsh.png

I am not satisfied with this presentation.

This is the current code being used:

<div class="card-body scroll" style="border: none;">
    <div class="cont">
        <div class="row">
            <div class="col-sm-12">
                <div class="card" style="border: none;">
                    <div class="box-header">
                        <div class="row">
                            <div class="col-sm-8">
                                <h3 class="box-title w-text">Business Management</h3>
                            </div>
                            <div class="col-sm-4">
                                <div class="box-tools">
                                    <div class="input-group-prepend">
                                        <input type="text" name="table_search" class="form-control pull-right" placeholder="Search" ng-model="searchField">
                                        <span class="input-group-text">
                                            <i class="fa fa-filter"></i>
                                        </span>
                                        <span class="input-group-text">
                                            <i class="fas fa-plus"></i>
                                        </span>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <strong>Company Name</strong>
                        </div>
                        <div class="col-sm-3">
                            <strong>Tax ID</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Fiscal Address</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Active</strong>
                        </div>
                        <div class="col-sm-2">
                            <strong>Actions</strong>
                        </div>
                        <hr style="border: none;">
                    </div>
                    <div class="row" style="text-align: center;">
                        <div class="col-sm-3">
                            <h3>Central Vendor</h3>
                        </div>
                        <div class="col-sm-3">
                            <h3>J-XYZ</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Test Company</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Active</h3>
                        </div>
                        <div class="col-sm-2" style="color: orange;">
                            <i class="fas fa-chevron-circle-down"></i>
                        </div>
                        <div class="col-sm-3">
                            <h3>Regional Sun Distributor</h3>
                        </div>
                        <div class="col-sm-3">
                            <h3>J-1234567890</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>National Highway</h3>
                        </div>
                        <div class="col-sm-2">
                            <h3>Active</h3>
                        </div>
                        <div class="col-sm-2" style="color: orange;">
                            <i class="fas fa-chevron-circle-down"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

If anyone can provide assistance, it would be greatly appreciated! Thank you!

Answer №1

I managed to resolve this issue by utilizing the table provided with Bootstrap:

<table class="table">
                      <thead class="thead-light">
                        <tr>
                          <th scope="col">
                            <strong>Company Name</strong>
                          </th>
                          <th scope="col">
                            <strong>Tax ID</strong>
                          </th>
                          <th scope="col">
                            <strong>Fiscal Address</strong>
                          </th>
                          <th scope="col">
                            <strong>Active</strong>
                          </th>
                          <th scope="col">
                            <strong>Actions</strong>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><h3>Central Vendor</h3></td>
                          <td><h3>J-XYZ</h3></td>
                          <td><h3>Testing Company</h3></td>
                          <td><h3>Active</h3></td>
                          <td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
                        </tr>
                        <tr>
                          <td><h3>Regional Sun Distributor</h3></td>
                          <td><h3>J-1234567890</h3></td>
                          <td><h3>National Highway</h3></td>
                          <td><h3>Active</h3></td>
                          <td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
                        </tr>
                      </tbody>
                    </table>

For more information, please refer to the documentation here:

https://getbootstrap.com/docs/4.0/content/tables/

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

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

Mixing without Collections

After initially posting this question yesterday, I realized that I needed to clean up my code before proceeding. However, for my assignment, I am required to create a JavaScript quiz where the questions and answer choices are shuffled every time a user ret ...

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

Attempting to repair navigation menu on grou.ps website

Hey there, I'm currently working on improving the appearance of my website. The original site can be found at . After integrating it with the grou.ps community platform, I noticed that the navigation menu is not displaying correctly and the image is ...

Having trouble declaring custom pipes in Angular

A new pipe named 'shortend.pipe.ts' has been created within the app folder. import { PipeTransform } from "@angular/core"; export class ShortendPipe implements PipeTransform { transform(value: any, ...args: any[]) { return ...

Executing jQuery AJAX with PHP using 'POST' method to receive and process PHP code

Something seems to have gone wrong with my setup; it was functioning properly before but is now encountering issues. When trying to make a POST call from an HTML file to a php file (which fetches data from a REST API), instead of receiving the expected API ...

Stop the span within the paragraph from breaking onto a new line

I have a situation where I need quote symbols to be placed inside span elements that are children of a p element. Each quote symbol requires slightly different CSS styles, and they must be included in the HTML rather than in the CSS due to backend restrict ...

Custom container width causes animation to crash when scrolling

I'm having trouble with my header. When the containers change with scrolling, an animation takes place. Everything works fine with native Bootstrap CSS, but when I customize the width of the container in my custom CSS (the width set to 1140px), the an ...

What is the best way to access the form button inside a div element?

Here is the code snippet for my form: <form accept-charset="utf-8" action="https:example.com" method="get" name="test"> <div class="classy"><input type="button" class="buttonE ...

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

Troubleshooting Issue: jQuery Scroll Feature Unresponsive

I'm having an issue with my website where it's not scrolling down when I click on an arrow. You can see the site here. Despite trying on different divs, nothing happens when I click. I've also tested it on other sections with no success. & ...

The data retrieved from the API call is outdated

I am struggling with a weather web API that is only showing old data when called in the code. However, when I enter the API URL directly into the browser, it displays the most up-to-date information for the current city. Can anyone help me troubleshoot why ...

The Angular Universal client side appears to be inactive

My server-side rendered application is up and running, but I'm encountering an issue where the client-side functionality seems to be missing. Despite the routes rendering properly, none of the click events or console logs are working on the client sid ...

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Currently, in my navigation bar, I am attempting to make only the active or clicked list item appear bold when clicked. At the moment, I can successfully achieve this effect; however, when I click on other list items, they also become bolded, while the ori ...

Having trouble with Bootstrap 5 sticky-top functionality within a container?

Why is my <nav> not sticking to the top of the viewport when scrolling, even though it has the .sticky-top class? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <meta name="viewport" content="wi ...

I encountered an error when trying to install '@angular/cli' using the command 'sudo npm install -g @angular/cli' on Ubuntu

Encountering a problem while attempting to install Angular-CLI on Ubuntu My current Node.js and npm versions are as follows: Node-v9.11.1 npm - 5.6.0 The command I ran was: savera9@savera9-desktop:~$ sudo npm install -g @angular/cli Howev ...

Inquiring about the usage of div elements in constructing an HTML webpage

When designing my own web pages, I consistently encounter issues with using divs for a multi-column layout. Despite utilizing the float attribute to align columns left or right, resizing the browser window often causes them to stack on top of each other an ...

As soon as I inserted the image, the text vanished into thin air

The phrase "welcome" is not displaying after I included the av tag <!DOCTYPE html> <html> <style> @font-face { font-family: OpenSans; src: url(OpenSans-Bold.ttf); } * { ...

Customize the drawer background in Vue Material

Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> ...

How can we determine the total character count of a file that has been loaded into a textarea

I have a textarea where I can count the number of characters as I type. function calculateCharacters(obj){ document.getElementById('numberCount').innerHTML = obj.value.length; } <textarea name="textField" id="my_textarea" class="text_edit ...