No wrapping of columns in Bootstrap 4

I am struggling with preventing the B4 columns from wrapping when resizing the Browser. Check out my code below:

<div class="card card-outline-primary">
<div class="card-block">
    <form class="row">
        <div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;">
            <label for="visualTheme" class="control-label">1234</label>
            <div>
                <input class="form-control" style="height:30px;"/>
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;">
            <label class="control-label">5678</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;">
            <label class="control-label">abcd</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
     </form>
</div>

Fiddle

Despite my best efforts, the wrapping issue persists even when I make it smaller.

Your assistance is greatly appreciated.

cssbootstrap-4

Answer №1

Unfortunately, the solution provided in the accepted answer does not address the specific question raised by the original poster.

In Bootstrap 4, .rows serve as flex containers, with the .col's within the row acting as flex items. There are numerous utility classes available to help manage the flex containers and items.

If you want to prevent the columns in your row from stacking, simply add the .flex-nowrap class to your row:

<form class="row flex-nowrap">
...
</form>

For more information, you can refer to the Bootstrap 4 Flex Documentation

Answer №2

col-xs-* class is no longer compatible with bootstrap 4 .col-xs-* was specifically for bootstrap 3 Therefore, in bootstrap 4, you should use col-*.

Therefore, your class col-xs-4 will not function properly in bootstrap 4. Instead, use col-4.

Below is the updated code with the correct class.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="card card-outline-primary">
  <div class="card-block">
    <form class="row">
      <div class="col-4" style="border:solid;border-color:red;border-width:5px;">
        <label for="visualTheme" class="control-label">1234</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
      <div class="col-4" style="border:solid;border-color:blue;border-width:5px;">
        <label class="control-label">5678</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
      <div class="col-4" style="border:solid;border-color:green;border-width:5px;">
        <label class="control-label">abcd</label>
        <div>
          <input class="form-control" style="height:30px;" />
        </div>
      </div>
    </form>
  </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

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

javascripthtmlcssreactjs

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

javascripthtmljquerycss

What sets flex-start apart from baseline?

When using the align-* properties in flexbox, what sets flex-start apart from baseline? In the code snippet below, both align-self: flex-start and align-self: baseline produce the same result. Can you identify scenarios where align-self: flex-start and a ...

htmlcssflexbox

Utilize dynamic inline styling to pass asset image paths as background images in Nuxt.js

I am in the process of developing a Nuxt.js application and I have a requirement to dynamically set the background image of an element using images from the assets folder. Here is what I have implemented: <template> <div> <div v ...

cssvue.jswebpackassetsnuxt.js

Is it possible to rearrange the positions of 2 divs using solely CSS?

I have created a unique design. On iPad, I am assigning the class 'handHeld' to the <body>, which will trigger positional changes between optionsWrapper and #container using CSS classes I've defined below on jsfiddle.net. .handHeld d ...

javascriptjqueryhtmlcss

My HTML elements are not displaying in the correct order. Any suggestions on how to resolve

Hi, I am currently working on a website using HTML, CSS, and JS. I have encountered a small issue in the HTML section. Here is the code snippet: window.onscroll = function() { changeOnScroll() }; function changeOnScroll() { var winScroll = docum ...

javascripthtmlcss

CSS selector for the 'second next' element, checkboxes and labels within MVC forms

I found a helpful resource that explains how to style checkboxes using CSS. It suggests using the + selector to target the label immediately following the checkbox: input[type="checkbox"]{} input[type="checkbox"] + label {} However, I encountered an issu ...

htmlcssasp.net-mvc

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...

javascripthtmlcss

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

javascriptjqueryhtmlcss

Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Hello! I am in the process of creating my first website, and it's going to be a D&D character randomizer. Currently, I'm working on the Nav-bar section and I have four bars that I want to fit across the screen equally, regardless of the scree ...

htmlcss

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

Positioning the fourth object aligned to the right side within a map function in React using Bootstrap col-md-4

There are 9 objects in an array, and I want to display them with 3 items in one row. The first row looks fine, but the first item of the second row is moving to the right side. <div className='row'> { services? services.map((d, i) => ...

reactjsbootstrap-4

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

The `class="d-none d-lg-block"` is a handy feature in Bootstrap for hiding elements

I am having trouble implementing the class="d-none d-lg-block". It does not seem to be working as expected. Here is the code that I have been attempting to use: Could you please review it and let me know if there are any errors? <div class=& ...

htmlbootstrap-4gridviewstylesbootstrap-grid

Try rotating a triangle in 3D using either CSS or JavaScript

I want to create a right-angle triangle that looks like this . . . . . . . . . . . . . . . . . . but I also want to add a 3D animation that will transform it into a right angle like this . . . . . ...

javascriptjquerycsshtml

Is it allowed to modify <li> tag only when it contains a <strong> child element?

Is it possible to use SCSS to change the background color of a li element based on whether its child is a strong tag or not? li { margin-left: 3px; margin-bottom: 3px; border: solid transparent; background-color: #fff; border-top-left-radius: ...

htmlcss

Struggling to designate the active button on an HTML/CSS webpage

As a beginner in the world of HTML and CSS, I'm facing some challenges with making buttons appear active. My goal is to have button1 highlighted by default when it's selected, and upon clicking on button2, the content above should change successf ...

jqueryhtmlcss

The transform operation has no effect whatsoever

Just a quick intro, I created an animated clock using CSS and HTML for homework, but now I want to enhance it by adding JavaScript functionality. I tried to sync the clock hands with the current time using JS, but for some reason, the animation always star ...

javascripthtmlcssanimationtransform

Could Flexbox CSS be used to create a responsive layout like this?

Appreciate your help in advance. I am facing a challenge with the current layout. <article> <section class="content">1</section> <aside class="ads">2</aside> <section class="comments">3</section> < ...

htmlcsslayoutresponsive-designflexbox