JavaScript Nested functions

How to make horizontal scrollable in a bootstrap row?

Last Updated : 29 Jul, 2024

Here is the task to make horizontally scrollable in a bootstrap row. It can be done by the following approach:

Approach:

Making all the div element in inline using display: inline-block; property
Adding the scroll bar to all the div element using overflow-x: auto; property.
white-space: nowrap; property is used make all div in a single line.

Example :

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>How to make horizontal 
      scrollable in a bootstrap row?</title>

    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">

    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /* The heart of the matter */
        
        .horizontal-scrollable > .row {
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .horizontal-scrollable > .row > .col-xs-4 {
            display: inline-block;
            float: none;
        }
        /* Decorations */
        
        .col-xs-4 {
            color: white;
            font-size: 24px;
            padding-bottom: 20px;
            padding-top: 18px;
        }
        
        .col-xs-4:nth-child(2n+1) {
            background: green;
        }
        
        .col-xs-4:nth-child(2n+2) {
            background: black;
        }
    </style>
</head>

<body>
    <center>
        <div class="container">

            <h1 style="text-align:center;color:green;"> 
            GeeksforGeeks 
        </h1>
            <h3>
            To make horizontal scrollable in a bootstrap row?
        </h3>
            <div class="container horizontal-scrollable">
                <div class="row text-center">
                    <div class="col-xs-4">1</div>
                    <div class="col-xs-4">2</div>
                    <div class="col-xs-4">3</div>
                    <div class="col-xs-4">4</div>
                    <div class="col-xs-4">5</div>
                    <div class="col-xs-4">6</div>
                    <div class="col-xs-4">7</div>
                </div>
            </div>
        </div>
    </center>
</body>

</html>

Output:

JavaScript Nested functions

S

SHUBHAMSINGH10

Improve

Article Tags :

Similar Reads

How to make Draggable and Scrollable Modal in Bootstrap?

Given an HTML document and the task is to create a bootstrap modal that can be scrolled and dragged on a mobile device. This task can be easily achieved using the "Scrolling long content" models available in the Bootstrap library. Approach: Modals are built with HTML, CSS, and JavaScript. They are p

How to make vertical scrollable rows in bootstrap?

In Bootstrap, creating vertically scrollable rows allows for efficient display of large content within a limited space. By enabling vertical scrolling, users can view content that exceeds the visible area without altering the overall page layout, improving usability. It can be done by the following

How to Create a Horizontal Timeline in Bootstrap ?

A horizontal timeline is a graphical representation of events or milestones displayed horizontally along a linear axis. It's a visual way to showcase a series of events or points in time, typically arranged from left to right. Each event may include details such as a title, date, description, and li

How to Add Horizontal Scroll Bar in HTML Table?

When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpa

How to style Horizontal Zebra-Striped Table in Bootstrap 5?

A zebra-striped table is a table that has alternating shaded rows to provide visual distinction between rows and make the table easier to read and understand. This is commonly used in tables with a large number of rows. Note: To create a zebra-striped table, use the nth-child() selector and add a ba

How to make a Row with 7 Equal Columns in Bootstrap ?

Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ

How to Create Scrollable Horizontal Menu using CSS ?

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container. Syntax white-space: nowrapoverflow: auto;[GFGTABS] HTML <!DOCTYPE html> <html> <head> <style> div.s

How to create Hoverable Table Rows in Bootstrap 5 ?

This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class "table-hover" in the tag. This effect enhances user interac

How to make Responsive Carousel in Bootstrap ?

Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr

How to make whole row in a table clickable as link in Bootstrap ?

Making a table row clickable as a link means that clicking anywhere in that row takes you to a specified webpage, making navigation easier and more interactive for users. To make a whole row clickable as a link in Bootstrap, wrap each <tr> in an <a> tag or use the Bootstrap styling. Usin