"Utilize Bootstrap 4 to create a 5-column row layout featuring lengthy text

I'm familiar with how bootstrap 4 uses col instead of col-xs, but I've encountered an issue. When the text within a column is too long to fit on a small screen, the columns begin to stack below each other. Is there a way to prevent this and set the col width to 1/5 of the screen while cutting off the excess text? Give the code below a try and adjust your browser width.

<div class="container-fluid">
<div class="row">
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
</div>

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

To ensure that text inside columns does not wrap and instead shows ellipsis (...) when it is too long, you can utilize the text-truncate class.

Check out an example at: 

<div class="container-fluid">
    <div class="row>
        <div class="col text-truncate>some loong loong loong loong loong text</div>
        <div class="col text-truncate>some loong loong loong loong loong text</div>
        <div class="col text-truncate>some loong loong loong loong loong text</div>
        <div class="col text-truncate>some loong loong loong loong loong text</div>
        <div class="col text-truncate>some loong loong loong loong loong text</div>
    </div>
</div>

If you prefer to not have ellipsis, you can use the text-nowrap class. More information on text wrapping and overflow in Bootstrap 4 can be found here: text wrapping and overflow.

Answer №2

One way to prevent wrapping is by using the flex-nowrap class.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="col">some long text</div>
    <div class="col">some long text</div>
    <div class="col">some long text</div>
    <div class="col">some long text</div>
    <div class="col">some long text</div>
  </div>
</div>

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

Display issue with Django SelectDateWidget

Having some trouble rendering the built-in SelectDateWidget in Django. When I try, it displays as <django.forms.widgets.SelectDateWidget object at 0xb4f6bc6c> Submit As a newcomer to Django, I've gone through the documentation and searched onl ...

pythondjangohtmldjango-formsdjango-widget

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

htmlcss

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Limit the scope of addClass() to immediate children and not descendants

Looking at the code below: <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" ...

javascripthtmljquery

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

javascriptjqueryhtmlimagesrc

Angular 6 Bootstrap Fixed Positioning

Looking to implement affix or scrollspy functionality from Bootstrap 4 into Angular 6, I've been searching for existing libraries. Came across JonnyBGod's scrollspy, but it appears to be designed for Angular 5 and uses rxjs 5. Does anyone know of ...

angularbootstrap-4angular6scrollspybootstrap-affix

Is there a way that I can move data input from one page to another using a form table?

Currently, I am developing a practice task manager using Bootstrap-4 and Vue.js. Although this is all relatively new to me, I have made significant progress. The only thing left to do is figure out how to transfer the input data from one html page to anoth ...

vue.jsbootstrap-4dynamic-tables

interactive symbols in a reorganizable tree structure

I have been developing a customizable tree list for our users to arrange their website content. It allows them to add and rearrange pages by dragging and dropping. Each list item includes the page name and three icons (lock, visible, and edit). The challe ...

javascriptjqueryhtmlcssjquery-ui

Tips for sizing a div based on the dimensions of an image

Looking to Achieve: I have a PNG image of a shirt with a transparent background that I want to place on top of a colored square. I want the shirt in the image to stand out over the edges of the square, creating a visually appealing effect. The image's ...

htmlcss

"Using Javascript to assign a class based on a date being greater than

I am facing an issue with a script that applies a CSS class to table cells if the date is greater than a certain value. Currently, the script only works for today's date. I need it to work for dates within and outside of this week as well. $('td ...

javascriptjquerycssdate

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

javascripthtmlinternet-explorermicrosoft-edge

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

I'm trying to incorporate some widgets into my Typescript React component. Here is the embed code export default class App extends React.Component { render(): ReactNode { return ( <div> Chart test <div className= ...

javascripthtmlreactjstypescripttradingview-api

Switching between different apps on a Django website

There are currently 2 applications on my website: users base The main url configuration always generates URLs with the appname of base/index.html. When a URL action like href="login" is provided from base/index.html, it automatically looks for "base/log ...

htmldjangopython-3.x

What is the best way to import data (such as a CSV file) into a webpage using a script tag?

How can a resource be loaded in HTML5 using a script tag? The given syntax doesn't seem to be working as expected. <script src="file.structure" type="application/structure"></script> Appreciate any help on this issue! ...

htmlresourcesloading

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

Tips for including an HTML table in Rmarkdown

I recently utilized the 'sjPlot' package to perform data analyses. Specifically, I used the 'sjt.df' function to generate a HTML table that provides a simple description of variables in my dataset. I then proceeded to create an Rmarkdow ...

htmlrr-markdown

Struggling to link variables and functions to an angularJS controller

When using the $scope object to bind functions and variables, and making changes accordingly in HTML, the code works fine. But when using a different object, it doesn't work as expected. Here is an example of a working code snippet: ...

javascripthtmlangularjs

Discover the quick method of retrieving the checkbox value instantly

Looking for a way to track when a checkbox is checked using Angular This is the current setup: <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="test[item.id]" ng-click="getID()" ng-checked="checkAll"/> {{ ...

javascripthtmlangularjs

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

Middle align an absolutely positioned block within a table cell vertically

Here is the code I am working with: td { border: 1px solid #cecece; position: relative; padding: 80px 20px; } .hint { background: yellow; position: absolute; top: 0; bottom: 0; left: 100px; } <table style="width:800px"> <tr> ...

htmlcss