Tips for containing text inside a div element using HTML with Bootstrap styling

I'm having an issue where my text overflows the page at certain sizes. How can I prevent this from happening?

Despite my efforts to find a solution through Google and various attempts, I have been unsuccessful.

If you take a look at the screenshot I've provided, you'll see exactly what I mean. Below is the code causing this problem.

Thank you in advance!

https://i.sstatic.net/IPKR9.jpg

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde3fde2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">



<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
    <table class="table">
  <thead>
    <tr>
      <th scope="col" >CRN</th>
      <th scope="col">Subject</th>
      <th scope="col">Course</th>
      <th scope="col">Credits</th>
      <th scope="col">Title</th>
      <th scope="col">Days</th>
      <th scope="col">Times</th>
      <th scope="col">Instructor</th>
      <th scope="col">Attribute</th>
      <th scope="col">Professor Difficulty</th>
      <th scope="col">Professor Rating</th>
      <th scope="col">Would Take Again</th>
    </tr>
  </thead>
  <tbody>
  {% for row in all_data %}
    <tr>
      <th><a href="https://selfserveprod.yu.edu/pls/banprd/bwckschd.p_disp_listcrse?term_in=202109&subj_in={{row['subj']}}&crse_in={{row['crse']}}&crn_in={{row['crn']}}" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Click to get register for this CRN on the YU Banner Site.">{{row['crn']}}</a></th>
      <td><strong>{{row['subj']}}</strong></td>
      <td >{{row['crse']}}</td>
      <td>{{row['cred']}}</td>
      <td>{{row['title']}}</td>
      <td>{{row['days']}}</td>
      <td>{{row['time']}}</td>
      <td>{{row['instr']}}</td>
      <td>{{row['Attr']}}</td>
      <td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor"> 
         <div class="progress">
             <div class="progress-bar" role="progressbar" style="width: {{row['profDiff']}}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{row['profDiff']}}%
             </div>
         </div>
      </td>
      <td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profRating']}}</td>
      <td data-bs-toggle="tooltip" data-bs-placement="top" title="Information Taken From RateMyProfessor">{{row['profWouldTakeAgain']}}</td>
    </tr>
 {% endfor %}
  </tbody>
</table>
</div>
</div>
</body>

Answer №1

To make a problematic div scrollable, you can use the CSS property overflow: scroll:

.container > div {
  overflow: scroll;
  background-color: #fff;
}

body {
  background-color: pink;
}
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
    <table class="table">
      <!-- Table content goes here -->
</div>
</div>
</body>


Alternatively, for resizing content based on screen width, you can use Javascript combined with CSS's transform: scale():

  • The content should adjust as the browser window is resized;
  • Set transform-origin to improve scaling behavior.

// JavaScript function to resize table based on window size
$(document).ready(function() {
  resizeTable();
});

$(window).on("resize", function() {
  resizeTable();
});

function resizeTable() {
  var width = $(document).width();
  
  scale = Math.min(width / 1500, 1);
  
  $(".container table").css("transform", `scale(${scale})`);
}
.container > div {
  overflow: scroll;
  background-color: #fff;
}

.container table {
  transform-origin: left top;
}

body {
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="shadow p-3 mb-5 bg-white rounded">
    <table class="table">
      <!-- Table content goes here -->
</div>
</div>
</body>


However, this approach may not work well for very small screens like mobile phones where text becomes too small. For such cases, consider using CSS media queries to handle them separately.

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

Issue with React/Next.js input field rejecting commas

I'm experiencing a problem with an input field in my React application that was developed using Next.js. The issue arises specifically when using an iPad device, where the input field behaves inconsistently when dealing with commas. When using deskto ...

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

Angular Material 2: Sidenav does not come with a backdrop

I'm encountering an issue with the SideNav component while developing a website using Angular 2. The SideNav has 3 modes, none of which seem to affect what happens when I open it. I am trying to make the backdrop display after opening. Even though t ...

Activate hover effect on toggle button

When I hover over the "CHANGE" button, the orange color appears as expected. Clicking the button once turns the color red but removes the hover color, which is fine. However, clicking it twice brings back the original blue color but the hover effect is m ...

Tips for utilizing the value retrieved from foreach within ng-repeat using angularjs

In order to display the field "seconddate" only if it is greater than "firstdate", a function needs to be implemented that will return true or false based on the comparison. The date format is in dd mmm yyyy (e.g., 22 Nov 2017). However, it is unclear how ...

Update the styling of buttons in CSS to feature a unique frame color other

Can anyone help me with styling Bootstrap buttons and removing the blue frame around them after they're clicked? Here's what I've tried: https://i.stack.imgur.com/jUD7J.png I've looked at various solutions online suggesting to use "ou ...

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...

Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I&apo ...

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

Change the color of the icon from white to blue in png format using html/css

Changing a White Icon.png to a Blue Icon.png Using HTML/CSS The original icon.png is white in color. How can we change it to a blue color version using only HTML and CSS? HTML: <img src="icon.png" class="icon1"> CSS: .icon1 { background: url(ic ...

Struggling with incorporating elements into a dynamic CSS3 banner design?

Struggling to add up to 10 text items to the CSS3 animated banner. Having difficulty getting the items to display properly. I'm curious if there is a simpler way to achieve this with animations as shown in this example: http://jsfiddle.net/zp6B8/1/ & ...

What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page. <div id="top_menu">This is the menu and it is centered on the page</div> Here is my CSS code: #top_menu { margin: 0 auto; width: 600px; ... } Next to the top menu, I ...

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

Is it possible to conceal the dates from past months in the datepicker plugin?

Currently, I am utilizing a datepicker tool from jQuery UI and adjusting its CSS to suit my requirements. My goal now is to hide any dates that are not currently active, specifically those displayed from other months. I am unsure if this can be achieved ...

Elevate the block when encountering errors in HTML/CSS

Here is a picture of what I want, and below I will provide a more detailed description: Link to the image (I cannot paste it here) I am explaining the elements involved. There are three main components: 1) The topmost text "Bla bla bla bla" 2) The butt ...

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

In the mobile view of the jumbotron, there is a noticeable blank area on the right side

I've searched high and low for a solution to this issue, but nothing seems to pinpoint the cause of the problem. The white space that's causing trouble is evident in the following image: https://i.sstatic.net/95Rh6.jpg Could you help me identif ...

What are the steps to getting Jarallax MDB up and running?

This is the code I am currently working with: <div class="view jarallax" data-jarallax = '{"speed":0.2 }' style="background- image: url('OFP/OFP_Group.jpg'); background-repeat: no-repeat; background- size: cover; background-positi ...

What measures can I implement to prevent unauthorized access to my user login page?

Hey there! I'm currently working on an API project that involves setting up a login system using NodeJs and a mySQL database. Although I've successfully connected to the database and created a basic login page, I'm encountering an issue whe ...

Combining shared table rows with embedded ruby code in Javascript - is it possible?

I'm a new Javascript learner and I'm attempting to create a function that will merge rows with the same value (year in this case) and add their numbers together. Although my code isn't functioning as expected, it also doesn't seem to be ...