What is the best way to ensure my content is presented in a horizontal layout?

I am working on a movie website using PHP, HTML, CSS, and Bootstrap.

My goal is to have the movies displayed horizontally with 3 movies per row instead of vertically like they are currently shown.

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

Below is a segment of my code snippet:

$display_content .= '
    <div class="container mt-5 text-center">
        <div class="d-inline">
            <img src="'.$sub_row["poster_url"].'" class="img-responsive img-thumbnail"/>
            <h4>'.$sub_row["title"].'</h4>
            <p>'.$sub_row["description"].'</p>
            <p>'.$sub_row["duration"].'</p>
        </div>
    </div>
    ';
htmlcssbootstrap-4

Answer №1

To arrange content in a horizontal direction, you can utilize the bootstrap .flex-row class. Hopefully, I have correctly interpreted your question.

$display_content .= '
    <div class="container mt-5 text-center">
        <div class="d-flex flex-row">
           <div class="p-2">
            <img src="'.$sub_row["poster_url"].'" class="img-responsive 
             img-thumbnail"/>
           </div>
        <div class="p-2">
            <h4>'.$sub_row["title"].'</h4>
        </div>
        <div class="p-2">
            <p>'.$sub_row["description"].'</p>
        </div>
        <div class="p-2">
            <p>'.$sub_row["duration"].'</p>
        </div>
 
        </div>

        </div>
    </div>
    ';

Answer №2

To style the parent element in your code, you can apply the following CSS:

display: inline-block;
width: 33%;

Another option is to utilize bootstrap classes by enclosing each row with the "row" class and assigning the "col-sm" class to every immediate child of the "row". Alternatively, you could add the class "col-sm-4" to each instance of "container mt-5 text-center". Since bootstrap's grid system consists of 12 columns, "col-sm-4" will make the div occupy one-third of the parent's width. Visit Bootstrap's documentation for further details. Bootstrap also offers support for flex boxes.

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 a 90% zoom level in the browser does not trigger any media queries

When addressing the width of a specific class, I utilized CSS media queries as shown below: @media (max-width:1920px) { .slides { width: 860px; } } @media (max-width:1500px) { .slides { width: 852px; } } @media (max-width:1 ...

cssmedia-queries

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

javascripthtmlexpressejsbackend

There seems to be a problem with the while loop in the PHP code while creating a forum

Encountered a new error that says: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') AND type='o'' at line 1. Can someone assist in fixing this issu ...

phphtmlmysqlcssforum

The affix feature in Bootstrap's navbar fails to recognize the height of images

My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist. The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets ...

javascriptcsstwitter-bootstrapaffix

Can information be transferred to a CSS document?

Currently working on developing a content management system (CMS) using PHP and exploring the possibility of passing a URL to an image. In my PHP pages, I am utilizing Twig templates and the {{ image1url }} to display the image URL. Is there a way to pas ...

phphtmlcsssymfony

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

htmlangularangular-material

CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot. The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a bac ...

htmlcsspseudo-class

How to approach the situation with semantic markup and responsive design in mind?

Currently, I am developing a small website employing the mobile-first strategy. This means that I design for small screens first and then adapt as the screen size increases. To save space, I either show or hide certain information on the page or swap it ou ...

csshtmlresponsive-designsemantics

Selection box containing options retrieved from MySQL database dates

I am trying to populate an HTML dropdown with data from a MySQL database. I ran the query in PHPMyAdmin and it worked fine, returning one record. The entire website is connected to this MYSQL details. Here is my code:  <?php mysql_connect("loc ...

phphtmlsql

Tips on saving a form submit button data to localStorage

As a newcomer, I am on a quest to make this function properly. My goal is to create a form where the submit button saves data to the localStorage. Here's what I have tried thus far. <script> function storeRecipe() { localStorage.setItem($(" ...

javascripthtmlcss

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

javascripthtmlcss

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

Encountering a TypeError with DataTables and Tabledit

I've been attempting to integrate DataTables with Tabledit, but I keep encountering the error message "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags also matches up. Interestingly, if I comment out the " ...

javascripthtmljquerydatatablestabledit

I am facing an issue where PayPal buttons are overlapping other elements on my website. Unfortunately, I am unable to control the

Having integrated PayPal buttons on my Magento website, I am facing an issue where the buttons have their CSS classes inline. This causes them to overlap other elements on the page when scrolling. For instance, as I scroll down, the PayPal button overlaps ...

javascripthtmlcsspaypalmagento2

Get all text that comes after a closing tag up to a designated tag using JSOUP

I have this snippet embedded within a plethora of table rows in a table: ......... <tr class="greycellodd" align="right"> <td align="left"> <input type="checkbox" name="cashInvestment" value="100468057"/> </td> <td align="left"& ...

htmlparsingtextextractjsoup

Issue with Beautiful Soup/Selenium: unable to locate div element or any content within the body

My task involves extracting item names (such as cotton shirt) and their corresponding prices (¥3,600) from within the <div class="items-box-body"> section. <div class="items-box-body"> <h3 class="items-box-name font-2">cotton shirt& ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

A Step-by-Step Guide to Downloading Images by Clicking

Having an issue with my image download code. When I try to download an image, the process starts but doesn't complete and no file is received. Instead, a type error is encountered. <html> <head> <script type="text/javascript"> funct ...

javascriptjqueryhtml

Tips on sending multiple values to AngularJS Directive

Currently, I am in the process of creating a simple AngularJS directive. As I am still very new to AngularJS, I would appreciate it if the answers provided could be simplified! The directive I am working on is essentially a combobox. For those unfamiliar ...

javascripthtmlangularjscombobox

"Learn how to specifically extract parent <li> elements without including the child <li> elements

When attempting to crawl a website [URL: https://www.khaasfood.com/shop/], my first task is to retrieve the categories with their hierarchy. The .container element contains a list of li tags representing parent categories. Each parent category may also h ...

pythonhtmlcssscrapy