Prevent Column Breaks in Bootstrap by Setting Minimum Width

I have the following code and I am trying to create two columns with a minimum width for mobile browser support.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-6" style="background-color: blue;min-width: 250px;">A</div>
        <div class="col-6" style="background-color: red;min-width: 250px;">B</div>
        <div class="col-12" style="background-color: green;min-width: 500px">
            C
        </div>
    </div>
</div>

On screens smaller than 500px, the first and second divs wrap onto two lines instead of remaining in the same row.

This is how it looks on a small screen:

https://i.sstatic.net/X4c3g.png

This is how it should look on a small screen (as it appears on a larger screen):

https://i.sstatic.net/758zc.png

How can I resolve this issue?

Thank you

Edit

In my actual code, I have used bootstrap order. So, on larger screens, the order is A C B, while on smaller screens it is A B C. Therefore, I cannot remove the row class.

<meta name="viewport" content="width=device-width">
This tag needs to be added to ensure mobile support.

csstwitter-bootstrap

Answer №1

After implementing your code, everything ran smoothly on my end. Have you examined any additional external tags that could potentially be triggering this issue?

https://i.sstatic.net/LijRp.png

Answer №2

To implement the layout with a Parent DIV, refer to the example below:

<div class="parent_div">
   <div class="col-6" style="min-width: 250px">1</div>
   <div class="col-6" style="min-width: 250px">2</div>
   <div class="col-12" style="min-width: 600px">3</div>
</div>

Apply the following CSS:

.parent_div{
   display: flex;
   flex-wrap: wrap;
} 
.col-6{
   width: 50%;
}
.col-12{
    width: 100%;
}

Answer №3

Give it a shot!

.container{
   display: flex;
   flex-wrap: wrap;
}
<div class="container">
   <div class="col-6" style="min-width: 250px">A</div>
   <div class="col-6" style="min-width: 250px">B</div>
</div>
<div class="row">
   <div class="col-12" style="min-width: 600px">C</div>
</div>

Answer №4

If you want to make use of "flex", ensure to eliminate any inline min-width settings. If you are unable to remove them, then you must include the !important declaration for min-width. Check out the example below: Implement css @media max-width(500px)

.container .row {
   display: flex;
   flex-wrap: wrap;
} 
.container .row .col-6{
   width: 50%;
   min-width:0 !important;
}
.container .row .col-12{
    width: 100%;
    min-width:0 !important;
}
    <div class="container">
    <div class="row">
        <div class="col-6" style="background-color: blue;min-width: 250px;">A</div>
        <div class="col-6" style="background-color: red;min-width: 250px;">B</div>
        <div class="col-12" style="background-color: green;min-width: 500px">
            C
        </div>
    </div>
</div>

Answer №5

To resolve the issue, you will need to make changes to the HTML code. The following snippet should help you address the problem.

.col-a {
  background-color: purple;
}

.col-b {
  background-color: red;
}

.col-c {
  background-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6 col-md-6 col-a">Column A</div>
    <div class="col-6 col-md-6 col-b">Column B</div>
    <div class="col col-c">Column C </div>
  </div>
</div>

Answer №6

Take a close look,

If you are aiming to utilize pure bootstrap, then it is essential to incorporate bootstrap breakpoints in your design. In the code snippet provided below, I have utilized 768px as a breakpoint instead of 600px. If using 600px is mandatory, you can hard code it, or else, employ BS breakpoints.

I believe the code snippet below will offer assistance. Remember not to compromise on your requirements; if 768px does not align with your needs, you can opt for 540px or implement media queries and hard code it for 600px.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 col-6">1 one</div>
    <div class="col-md-12 col-6">2 two</div>
    <div class="col-lg-12">3 three</div>
  </div>
</div>

Answer №7

Fixing the problem was easy. I simply needed to assign a minimum width of 500px to the row element.

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

Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center prop ...

htmlcssflexbox

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

htmlcss

Display the datepicker beneath the input field

I successfully integrated the datepicker, but I prefer for the calendar to display below the date input field rather than above it. HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=" ...

javascriptjquerycsshtmltwitter-bootstrap

Unable to load the Universe 55 font using the @font-face rule

I recently encountered an issue with using a custom font (Universe 55 font) in html5. I downloaded the .ttf file, applied it with the @font-face rule, and tested it on various browsers including IE, Chrome, and mobile browsers. Unfortunately, the font does ...

htmlcssfont-facetruetype

Sometimes, CSS unicode characters may not render correctly and appear as jumbled symbols like "â–¾"

https://i.sstatic.net/eGvzJ.jpg Every now and then, about 1 in every 100 page refreshes, the unicode characters on my page turn into jumbled nonsense (you might need to zoom in to see it clearly). Specifically, the unicode characters are displayed as â ...

cssasp.net-coreunicodedatatablesbootstrap-5

Safari Issues: Bottom Aligned Items with Flexbox

Our current layout is as follows: https://i.sstatic.net/u6Qi9.png The layout displays the list (blue container) aligned at the top, but we require it to be aligned at the bottom. To achieve this, we set the container (orange) to be a flex container and t ...

csssafarisassflexboxionic2

What is preventing me from changing the text color of this span element to white?

For some reason, I'm trying to make the first two texts of each line appear in white, but my CSS doesn't seem to affect the span elements generated by JavaScript. Take a look at the code snippet below for more details. I'm still learning ho ...

javascriptcssvue.js

An array of tooltips linked to specific areas on an image using

Hello, I have created an imagemap with area polygons that display tooltips when the mouse hovers over them. Additionally, there is a legend at the bottom of the image map. My goal is to show the tooltip on the specific polygon area when the mouse is hove ...

javascriptjquerycss

Enhancing transparency with a touch of background color

After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...

javascriptphpcsshtmlcanvas

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed. <div id="header"> <div id="logo"> <a href="#"><img src="logo.png" ...

javascriptjqueryhtmlcsshtml5boilerplate

Having trouble aligning the divs

I am currently attempting to align 3 divs next to each other on my webpage, and while I have made some progress, I am running into an issue with setting the width based on a percentage of the screen. When I try to make the total width of all three divs add ...

htmltwitter-bootstrap

How to Keep Button Highlighted After Clicking

I've experimented with various methods like using :active, :focus, adding a class, and modifying CSS rules through jQuery to maintain the button highlight, but none of them have been successful. Please take a look at my code and point out any mistakes ...

jquerycsshtml

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed ...

cssangularjstwitter-bootstrapmeanjs

Challenges with Z-index and layering dynamics

I'm having trouble getting z-index to work. I've searched online but can't find a solution. How can I make the .navigation class have a lower z-index than the .mobilenav and .mobilenavclosed classes so that they appear above everything else ...

htmlcssangularjsz-index

Adding a transition effect to a div in CSS when switching from col-12 to col-9

I am facing an issue with the CSS provided below. It seems to only work when I close my div with the class "onclick-div". However, the transition effect is not visible when I click on the button to reduce the width of the div with the class "set-transiti ...

angularhtmlcssbootstrap-4

Switch the background image of a link within an accordion with a simple click

I'm attempting to create a toggle effect for a background image on a links within an FAQ accordion using javascript. After referencing this jsfiddle example (http://jsfiddle.net/QwELf/), I was able to get things to function. You can view my page in ...

javascriptcsstogglebackground-imageaccordion

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

cssreactjsfluent-ui

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

javascripthtmlcsstwitter-bootstrapmaterial-ui

I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS. html { width:100% height: 100%; margin: 0px; padding: 0px; border: none; } ...

htmlcssmobile