Page will break once it is filled vertically

My webpage is filled with Bootstrap 4 cards lined up in a row.

I am looking to add a line break when the vertical scroll bar appears. How can I achieve this?

Snippet:

<?php
//THIS FILE BELONGS TO CROPSATH, LICENSED UNDER GPLv3.
//CREATED BY MORICZGERGO A.K.A. SKIILAA
//CREATED: 2017.01.22.
//LAST MODIFIED: 2017.01.22.

include_once "include.php";

$conn = new mysqli($config->sqlServ, $config->sqlUser, $config->sqlPass, $config->dbName);

if ($conn->connect_error){
  echo "<center><h1>Failed to establish database connection.</h1></center>";
  echo $conn->connect_error;
  die();
}

$sql = "SELECT questionName FROM questions ORDER BY id DESC";
$result = $conn->query($sql);

if ($result->num_rows > 0){
  echo "<div class=\"responsive-thingy\">";
  //display data from rows as bootstrap cards
  while($row = $result->fetch_assoc()) {
echo "<div class=\"card\" style=\"width: 20rem; display: table-cell;\"><div class=\"card-block\"><h4 class=\"card-text\">" . $row["questionName"] . "</h4></div></div>";
  }
  echo "</div>";
} else {
  echo "<center><h1>No questions were found.</h1></center>";
}
?>

GitHub Repository

Answer №1

To incorporate hyphenation using CSS for text, you can utilize the 'hyphens' property

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

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

Can you align a row under its corresponding column in Bootstrap?

Hello, I'm facing a dilemma with my layout. I have a grid consisting of 2 Rows and 4 Columns (col-md-8 & col md-4 in each row). The structure is as follows: Within the container Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion] Row 2 Colum ...

Ways to control the number of boxes that are checked

I am currently working on a script to restrict the number of checkboxes that can be checked, but I am encountering an issue where the script is disabling all checkboxes on the page. Is there a way to only disable a specific checkbox within a certain div? ...

Navigating a Bootstrap modal using arrow keys for scrolling - up and down

I attempted to address this issue by using the following code: // here, 'this' represents the modal $(this).focus(); Despite trying the above solution and even attempting to trigger a click event on it, I was unable to get it to work! UPDATE ...

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

Attempting to align a CSS card flip within a Bootstrap layout

I have created a card using HTML and CSS, but I am struggling to make it line up with Bootstrap. Currently, the card is only in the middle of the section and I can't seem to figure out how to get four of these cards to line up in one row, and then ano ...

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Check out the JsFiddle demo here I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example. The source code within the aforementioned link contains specific CSS styles: .ui-tabs-vertical { width: 55em; } ...

Encountering a Vuetify CSS issue upon building for production

We recently acquired a Vue web app from a third party and have been working on enhancing it. One of the modifications we made was to integrate Vuetify in order to utilize its elements. While everything functioned smoothly during development, we encountered ...

Locking the second column of a data table with CSS to prevent scrolling

We need to freeze two columns in our data table - "PPD Delivery Schedule" and "Check Opex". The first column is working fine, but we're having issues freezing the second column. We've tried various approaches but haven't been successful so ...

Is there a way for me to receive user inputs, perform mathematical operations on them, and then display the result of the calculation? Additionally, is there a way to ensure that the output value automatically updates

As a newcomer to HTML and JavaScript, I'm unsure how to approach this task. Here is what I have so far: <div class="inputs"> <label for="#arena2v2">2v2 Arena Rating:&#9;</label><input class="pvp" type="number" step="1" m ...

Inheriting Django templates for a unique CSS class markup approach

I want to create a master.html file for inheritance, but I'm facing an issue where the code is repetitive in three different places except for the body class. Here's my current master.html: <html> <head>...</head> <body& ...

Interconnected dropdown selections for multiple dropdown menus

I have successfully implemented a jQuery function that populates the second dropdown options based on the selection of the first dropdown option. However, I am facing an issue with having multiple instances of this functionality in rows. When I change the ...

Customizing the select2 plugin in jQuery - A user-friendly alternative for select boxes

I am currently seeking a method to personalize the appearance of the Select2 plugin within a project. Although I have reviewed the documentation, I was unable to locate specific instructions on how to modify the styling of the select box. Please refer to ...

Adjusting the size of the jQuery window in Google Chrome

I'm encountering an issue with resizing a menu. The code I have works fine on all browsers except Chrome. Describing this problem in words is tough, so I'll provide some screenshots to better illustrate the issue. This is how my menu appears in ...

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

Currently, I am utilizing angular 1 along with angular material. I am trying to incorporate md-subheader with multiple md-virtual-repeat-containers within an ng-repeat loop. The source code can be found on this codepen. The issue I am facing is slightly c ...

Error Message: The function "menu" is not a valid function

I've encountered an issue with a function not being called properly. The error message states "TypeError: menu is not a function." I attempted to troubleshoot by moving the function before the HTML that calls it, but unfortunately, this did not resolv ...

Unable to watch video on android webview

I'm currently developing a mobile application for Android using PhoneGap, and I'm having trouble with playing HTML5 videos on my web page. The video is not visible and does not play automatically. How can I successfully play a HTML5 video on an A ...

JavaScript Bug Report

Currently, I am immersed in a project that encompasses various languages like HTML, JS, and PHP. While working on one of the PHP functions, I stumbled upon an unexpected anomaly. To dissect it better, I decided to break it down into simpler functions: &l ...

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

What is the best way to maintain body alignment while zooming in and out on a web page? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> body { font-family: 'Merriweather Sans&apos ...