Ways to avoid overlapping between bootstrap columns

Currently, I am honing my skills in Bootstrap by creating a simple example with 3 columns of varying sizes: 2, 8, and 2. However, I have noticed that on certain screen sizes, the contents within these columns overlap each other. My goal is to prevent this overlapping so that regardless of the screen size, the page always maintains the 3 columns with their content cascading down onto new lines.

<div id="SummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
    <div class="mainTenant">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

<div id="main" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" role="main>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="col-lg-2 col-md-2 col-sm-2 rightSidebar" role="complementary" >
    <div class="container-fluid">cccccccccccccccccccccccccccccccccccccccccc</div>
</div>

If you'd like to view my work on jsfiddle, you can access it here: https://jsfiddle.net/DTcHh/17967/

htmlcsstwitter-bootstrap

Answer №1

Breaking columns with letters is an unlikely scenario in real life. The chances of having a continuous string of letters without any space or breakpoints are very slim.

To address this issue, you can use the CSS property word-break: break-all;. Check out this example.

However, it's important to note that this is more of a theoretical problem than a practical one.

Update: Consider using dummy text generators such as lipsum.com to create placeholder text. Here's an example: here.

Answer №2

Experiment with this CSS style in the container: word-break:break-all

Answer №3

please refer to the updated code below for a solution to the problem.

div {
  word-wrap: break-word;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
  <div id="mainContainer" class="container-fluid">

    <div class="row row-offcanvas row-offcanvas-left">

      <div id="SummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
        <div class="mainTenant">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      </div>

      <div id="main" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" role="main">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>

      <div class="col-lg-2 col-md-2 col-sm-2 rightSidebar" role="complementary" >
        <div class="container-fluid">cccccccccccccccccccccccccccccccccccccccccc
        </div>
      </div>


    </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

Ensuring that the most recent accordion added remains open and dynamic

I am attempting to dynamically add Bootstrap accordions by clicking on the ADD button. Each time the button is clicked, I want a new accordion to be generated while closing any previous ones. I am having trouble understanding how to use Bootstrap methods a ...

jquerytwitter-bootstrapbootstrap-4

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

Having trouble implementing font css file in Reactjs

When working with Reactjs (Nextjs), every time I try to incorporate "css" into my project, I encounter the following error on my screen: Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' How can I solve this issue? ...

javascripthtmlcssreactjsnext.js

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

The scroll bar is acting peculiarly when the height is adjusted

I need assistance creating a chat widget that has a maximum height for the entire chat and allows the content to fill in without specifying fixed heights within the chat itself. Below is my code: HTML <section class="boxlr-chat"> <div class= ...

htmlcss

Tips for avoiding the display of concealed forms on a webpage

Hey there, I'm just starting out with html forms and currently experimenting with Jquery to hide forms upon loading the page. However, I've encountered an issue where some forms briefly appear before hiding after the page finishes loading. Here& ...

javascriptjqueryhtml

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears. For example, the first bar would appear at 100px, the second at 110px, and so on. I've been experimen ...

csssassbackgroundlinear-gradients

Trouble with buttons in table cells

There is a problem with a button placed in a table cell that spans two rows and does not fill the second row. How can I ensure that this button fills both rows? I have attempted to adjust the height in the button's style as well as in the table cell i ...

htmlcssbuttonhtml-table

Icons that are clickable in ionic

I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expecte ...

cssangularjsionic-framework

Is there a preferred method for looping through a NodeList and transferring its elements without the need to convert them into an Array?

Take a look at this jsFiddle that showcases the issue. It seems that while iterating over and making changes to the NodeList directly, the counter variable i skips every other node. In the provided fiddle example, there are two lists, #one and #two, and t ...

javascripthtmlarraysdomidioms

Using JQuery to monitor the loading of a newly selected image src attribute

As a newcomer to JavaScript and JQuery, I am facing a challenge that I couldn't find a solution for in other discussions: I have a function that retrieves the path to an image (/API/currentImage) using a GET request and needs to update the src attrib ...

javascriptjqueryhtmlajaximage

Tips on effortlessly updating the URL of your website

Despite seeing the question asked multiple times, I still find myself struggling to understand how to modify a URL or create a new HTML page that seamlessly integrates into a website without redirecting users. I am curious about achieving the functionalit ...

javascripthtmlcssangularjs

What is the best way to change a byte array into an image using JavaScript?

I need assistance converting a byte array to an image using Javascript for frontend display. I have saved an image into a MySQL database as a blob, and it was first converted to a byte array before storage. When retrieving all table values using a JSON ar ...

javascripthtmlangularjs

Having trouble displaying a local image in CSS using EJS

Hey there, I'm currently working with EJS. In my CSS file, I've added a background image but it's not showing up when the page loads. Strangely, if I use a hosted image, it works perfectly. Here is my directory structure: https://i.sstatic ...

cssnode.jsexpressejs

PHP - The form page freezes up every time I try to submit the form

Hey there! I've encountered an issue with my form submission. Everything works perfectly fine, except when the Title field is left blank. Here's a snippet of my HTML code: Title: <input type="text" name="title"><br /> Description:&l ...

phphtmlforms

The height transition on a Bootstrap modal is not functioning as expected

I am currently utilizing a Bootstrap (v3) modal for the login screen on my website. Within this login screen, there is a "password forgotten" button that triggers a simple jQuery function to hide the main login form and display the forgotten password form. ...

htmlcsstwitter-bootstrapcss-transitionsbootstrap-modal

Steps to assign a value to a variable upon clicking on text

Struggling to create a form using HTML, CSS, and PHP. The concept involves selecting an option from a dropdown menu and picking a date on a calendar. However, the challenge lies in sending a value to a variable in PHP upon clicking a day. Once the value ...

phphtml

JavaScript enables users to store over 5 megabytes of data on their client devices

Is there a way to store more than 5mb in the client browser? I need this functionality across various browsers including Firefox, Chrome, Internet Explorer, Safari (iOS), and Windows Phone 8 Browser. Initially, localStorage seemed like a viable option as i ...

javascripthtmllocal-storageindexeddbweb-sql

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? https://i.sstatic.net/uu4yO.png I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I ...

cssangularjsmaterial-designangular-material