Stop the content inside a div box from wrapping around the edges when using Bootstrap

Utilizing bootstrap to structure a webpage, I have organized three divs next to each other within a row. The widths of the divs are set as follows: 2 columns, 6 columns, and 4 columns in a 12 column layout.

The middle div has a minimum width defined. As a result, when the outermost div shrinks beyond a certain width, there isn't enough space for the rightmost div (the 4 column one), causing it to wrap around and extend below the other divs.

To avoid this wrapping behavior and instead cut off the div by the window when the screen size decreases too much, how can this be achieved?

If further details, code snippets, or images are needed, do let me know.

Thank you!

View before wrapping

View after wrapping

Answer №1

If you want to prevent wrapping of content, make sure to include the following CSS code in your row:

.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
}

The use of width:100%;margin:0;padding:0; is optional in this case.

To avoid stretching your content to full height, avoid placing content directly in bootstrap columns (e.g. `col-md-6`). Instead, nest a div within the column and place your content inside that nested div.

For example:

<div class="col-xs-2">
  <div class="contentDiv">
    <!--Put your content here-->
  </div>
</div>

Check out the below example for a clearer understanding:

#firstDiv,#secondDiv,#thirdDiv{
  height:100px;
  background-color:red;
  min-width:100px;
}
#firstDiv{
  background-color:green;
}
#secondDiv{
  background-color:blue;
  min-width:500px;
}
.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2" id="firstDiv">
    </div>
    <div class="col-xs-6" id="secondDiv">
    </div>
    <div class="col-xs-4" id="thirdDiv">
    </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

Utilize AngularJS to Access Global JavaScript Variables

I recently encountered a situation where I needed to incorporate some dynamic functionality into a website I was building. This led me to AngularJS, which I decided to integrate into certain parts of the site rather than the entire thing. Within my JavaSc ...

Would it be possible for me to adjust the CSS to center the sections?

I'm facing an issue with the layout of my website at . At the bottom, there is a navigation menu and three boxes with images. However, they are currently left-aligned instead of centered. Can anyone suggest CSS code that I can use to center them? Her ...

The columns in the row are not fully filling up the container

I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, ...

enabling the editing of two input fields by clicking on a button

Looking to make two input fields editable with a button click. Once edited, the data from these fields will be sent to separate columns in a database using ajax. Struggling to find a solution through online search. Any advice is appreciated! ...

What could be the reason for justify-self: flex-start not positioning the div at the bottom of a column?

I want to display a div in three levels: header, content, and footer. The content can vary in height and the footer should always be at the bottom. Here is how I have implemented it: <div class="news-content-block"> <div class=" ...

The dropdown in the Material UI GridList appears excessively wide

Currently, I'm attempting to design a grid-shaped drop-down menu in Material UI. Most of the dropdowns available in the documentation are either a single column or a single row. I tried utilizing a menu component that includes a GridList, which almost ...

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

Using Vue.js to dynamically assign CSS classes based on variables

Is it possible to achieve this with a dynamic class like the following? <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' "> I have been struggling to find the correct syntax for this. T ...

Add information from a filled data chart

I'm seeking your assistance with a challenge I am facing. In Form1.php, I have extracted data from the database (flock id, house, breed) which populates one table row. The issue is that this form involves two tables in the database. flock id, house, ...

Producing identical sets of 2 random hues for a pair of distinct items

I am trying to figure out a way to assign the same randomly generated color to two separate objects. Does anyone have any suggestions on how I could link these two objects so that they always have matching colors, refreshed whenever a condition is met? T ...

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

Displaying a loading spinner using JQuery while content is being loaded into a div

I have a navigation bar with links that load content from corresponding HTML pages into a div next to the navigation bar when clicked. To make it more user-friendly, I want to display a spinner while the content is loading. However, the current code I trie ...

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

Captivating images paired with informative captions

I am trying to display a picture with a description inline, but I am facing some issues. While I was able to align two pictures using div block:inline, adding a description to the first picture caused it to extend in width (despite setting margin: 0 and a ...

Aligning with the parent element and adjusting slightly towards the left side

.parent-div { box-sizing: border-box; min-width: 0px; padding: 1rem; min-height: 1px; margin: 0; border: solid 1px; } .child-div-one { box-sizing: border-box; margin: 0; min-width: 0px; min-height: 400px; display: flex; border: sol ...

Obtain and utilize the background color to easily implement the same color in another window

For my Chrome Extension project, I am looking to retrieve the background color of the current page and then set the background color of a window to match. Can someone guide me on how to accomplish this using JavaScript (with or without jQuery), and if ne ...

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

After loading content via ajax, I am unable to scroll to the item, as the page remains at the top. Strangely, when I refresh the page dynamically with content caching enabled, the page scrolls to the desired target. var startPageLoader = function( pid, si ...

Having issues with Div CSS functionality not properly functioning

My background CSS is working fine, but the styling for the .about div is not applying. Here is my HTML code: <DOCTYPE! HTML> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> </head> <body> ...

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

I have been attempting to implement the color-calendar plugin by following their tutorial closely. I have replicated the code from both the DEMO and documentation, shown below: // js/calendar.js import Calendar from '../node_modules/color-calendar&ap ...