Bootstrap grid collapses at the tiniest dimension

Here is a code snippet to create a responsive grid layout using Bootstrap:

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

<div class="container">
  <div class="row">

    <label class="col-2 col-form-label">Email</label>

    <div class="col-8">
      <input type="text" class="form-control">
    </div>

    <div class="col-2">
      text
    </div>

  </div>
 </div>

To see the issue with the grid breaking on smaller window sizes, check out this Bootply link.

If you resize the window to its smallest size, you'll notice that the last column shifts below the other columns instead of staying in the same row.

This problem occurs in both Bootstrap versions (4 & 3.7), where the last column (col-xs-2) doesn't maintain its position when the window size decreases.

Do you have any suggestions on how to fix this issue and ensure all three columns stay in the same row even at the smallest window size?

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Due to the padding, the columns cannot shrink in width less than 30px. As the screen width decreases, the columns eventually stack vertically. To avoid this, adjust the padding on the columns within the row. Bootstrap 4 offers a no-gutters class...

<div class="container">
    <div class="row no-gutters">
        <label class="col-2 col-form-label">Email</label>
        <div class="col-8">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 pl-1">
            text
        </div>
    </div>
</div>

Additionally, Bootstrap 4 provides padding utility classes that can adjust padding on specific elements. For example, the use of pl-1 (padding-left) gives space between the input and "text" in the last column. Another option in Bootstrap 4 is using flex-nowrap on the row to prevent wrapping and enable horizontal scrolling for overflow situations.

In Bootstrap 3, CSS adjustments are necessary to modify padding.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap

Answer №2

You have made a mistake by not closing the <div> tag

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row">
    
    <label class="col-2 col-form-label">Email</label>
    <div class="col-8">
      <input type="text" class="form-control">
    </div>
    <div class="col-2">
      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

Issue with the formatting of the disabled button

I am facing an issue with styling a disabled button. Whenever I try to apply custom styling, it reverts back to the default styling. I have already cleared my cache but the problem persists. The button is disabled using JavaScript with document.getElementB ...

css

Show a SweetAlert message if a specific Div Class is not found within the page

Seeking assistance with displaying a SweetAlert popup only if a certain div class is not found on the page. It appears to work when using an ID, but not with classes. Any suggestions on how to trigger this popup if the specified div class is absent? < ...

javascripthtmlsweetalertsweetalert2

Ways to reference a PHP variable within an anchor tag

I've been working on a page that pulls data from a MySQL database into a table. My goal is to allow users to click on the date in the table and be redirected to another page. Here's the code snippet I'm currently working with: $q = "SELECT ...

phphtmlmysql

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

I am currently working on creating a single-row CSS table with multiple cells, aiming to vertically center text within each cell. The desired table layout is as follows: <table width="100%" height="54" border="0" bgcolor="red"> <tr> <t ...

htmlcssvertical-alignmentcss-tables

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml

Tips for creating PrimeNG tables with columns that automatically adjust in size

Is there a way to automatically adjust and resize the columns in my PrimeNG table? I'm looking for a method to make this happen. Can you help me achieve this? ...

htmlcssangularprimeng-datatable

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

The functionality of a Cordova application using Framework 7 CSS can vary across different Android devices

A link is shared for reference showcasing how the progress bar appears on Samsung j2 and other Android devices. Here is the link: [https://i.sstatic.net/C9OpS.jpg](https://i.sstatic.net/C9OpS.jpg) On my personal device, the progress bar is displayed at th ...

androidcsscordovahtml-framework-7

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery

My client has a new requirement: adding functionality to increase font size, adjust contrast/brightness, and control sound on his website. When clicking on any of the control images, a slider should appear for the user to make adjustments accordingly. Ho ...

javascriptphpjqueryhtmlcss

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

javascripthtmlcssgetelementbyidclassname

"Encountered an issue with the validation upon clicking the submit

Here is my sample code snippet <form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submitForm();"> Here is the JavaScript function I am using <script type="text/javascript"> function submitForm() { var ...

javascriptjqueryhtmlforms

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

htmlcsscss-selectorsxhtmlpseudo-class

Accessing an HTML DOM element and assigning it to the value of an input tag

One of the elements on my webpage has the unique identifier last_name. I am trying to extract its value and pass it to an input tag. My attempt at achieving this is shown below, but it does not work as intended. <input type="hidden" name="lastName" va ...

javascripthtmlcss

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Here's an example of code I wrote to show and hide div elements using pure JavaScript. I noticed that it takes three clicks to initially hide the div elements. After that, it works smoothly. I was attempting to figure out how to display the elements ...

javascripthtmlcss

Preventing HTML form from being resubmitted upon page refresh after submission

I am facing an issue with my HTML form. Whenever I click submit, the form data is sent to the same php page. However, after submitting, when I refresh the page, the web browser shows a re-submission dialog. How can I prevent the form from submitting again ...

phpjqueryhtml

"Oops! Looks like there's a reference error - the function you're trying

Javascript: function insertSmiley(a) { var $img = $(a).children('img'); $("#message").insertAtCursor(($("#message").data("wbb").options.bbmode) ? $("#message").data("wbb").toBB($(a)): $(a).html()); return false; } HTML: <a href= ...

javascriptjqueryhtml

Keep one div attached to the edge of another div to ensure they remain conjoined when resizing

Is there a way to center a Square within the border of another div? I have attempted the following method: .container { position: relative; background-color: blue; } .square { position: absolute; height: 50px; width: 50px; border-radius: 0% ...

htmlcssbootstrap-4flexbox

Activate the Submission Button Once Validation is Complete

My form consists of multiple input fields with validations. Initially, the submit button is disabled. Each time I enter a field, the validation function should run immediately. After all fields are filled with valid input, the submit button should be enabl ...

jqueryhtmlcss

Is there a way to update page content without having to refresh the entire page?

My goal is to refresh specific content on a page without having to reload the entire page using JavaScript or jQuery. Since my project is built in PHP and JavaScript, I encountered this issue. Note : I want the page content to refresh when a user performs ...

javascriptphpjqueryhtmlajax

Adjust the primary scrolling section of a webpage to halt once it reaches a specific distance from the bottom of the viewport

I am facing a situation where I need to ensure that when scrolling down, a fixed pink menu bar at the bottom of the page does not overlap with the main blue content. This can be achieved by treating the blue content as an iframe positioned 60px from the bo ...

javascriptjqueryhtmlcss