The columns in Bootstrap 4.00 are staying on the same line and not wrapping to a new line

I'm a bit confused about the behavior I'm seeing. When I try to make the browser window narrower, instead of the columns moving to the next line as expected, they are overlapping each other. What could be causing this issue?

I wonder if it has something to do with how I've named the classes for the columns. I assigned col-4 to all three of them. Shouldn't they automatically move to the next line when the browser width decreases?

<html>
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>
  </head>
  <body>
    <div class="row">
      <div class="col-4">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked> Test
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off"> Test
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option3" autocomplete="off"> Test
          </label>
          <label class="btn btn-primary">
            <input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
          </label>   
        </div>
      </div>
      <div class="col-4">
        <span class="main">Date</label>
          <input id="dashboardDatePick" type="date" name="date">
        </div>
        <div class="col-4">
          <span class="main">Date 2</label>
          <input id="dashboardTimePick" type="date" name="time">
        </div>
      </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
  </body>
</html>
htmlcssbootstrap-4multiple-columns

Answer №1

For optimal Bootstrap styling, it is recommended to use the following class:

.col-md-4

instead of

.col-4

To achieve the desired layout, please replace all instances of .col-4 with .col-md-4.

Edit: By specifying medium screen sizes as the breakpoint, the div will span 100% of the screen width, resulting in the three divs being stacked vertically.

Answer №2

If you desire for them to break the line, you must specify from which screen size they should adopt a different width

By setting col-4, you are essentially instructing that on all screen sizes, it will be col-4 (width:33.33%)

As mentioned by you, if you want them to break the line, that implies a specific size declaration is needed;

For example:

col-md-4

→ from md and above, the width is set to 33.33% (12/4=3 => 100%:3=33.33%), while below md (indicating sm and xs), it sets width:100%

Find more information here: https://getbootstrap.com/docs/4.0/layout/grid/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <div class="container">
<div class="row">
            <div class="col-md-4">

                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-primary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Test
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="options" id="option2" autocomplete="off"> Test
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="options" id="option3" autocomplete="off"> Test
                  </label>
                  <label class="btn btn-primary">
                    <input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
                  </label>   
                </div>

            </div>

            <div class="col-md-4">
                <span class="main">Date</label>
                <input id="dashboardDatePick" type="date" name="date">
            </div>

            <div class="col-md-4">
                <span class="main">Date 2</label>
                <input id="dashboardTimePick" type="date" name="time">
            </div>                          

    </div>
 </div>

Note!

Bootstrap 4 no longer supports xs size, meaning col-* applies from xs and up

Answer №3

One of the key features in the latest version of Bootstrap 4 is the col-4 class, which sets the width to 33.33% for all devices. However, instead of using col-4, you can achieve your desired responsive design by utilizing col-lg-4 or col-md-4.

<html>

    <head>

        <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type='text/css'>

    </head>

    <body>

        <div class="row">
            <div class="col-lg-4">

                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-primary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Test
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="options" id="option2" autocomplete="off"> Test
                  </label>
                  <label class="btn btn-primary">
                    <input type="radio" name="options" id="option3" autocomplete="off"> Test
                  </label>
                  <label class="btn btn-primary">
                    <input class="btn-light" type="radio" name="options" id="option4" autocomplete="off"> Test
                  </label>   
                </div>

            </div>

            <div class="col-lg-4">
                <span class="main">Date</label>
                <input id="dashboardDatePick" type="date" name="date">
            </div>

            <div class="col-lg-4">
                <span class="main">Date 2</label>
                <input id="dashboardTimePick" type="date" name="time">
            </div>                          

    </div>

        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <script src="js/main.js"></script>

    </body>
</html>

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

Guide to updating user input on the screen when a click event occurs using Javascript and HTML

I've been working on writing HTML and JavaScript code that enables user input to change based on which button the user clicks. The idea is that the user enters find/replace values, and when they hit the replace button, the text they initially entered ...

javascripthtml

What could be the reason for only the First DIV showing up? Is there a way to display the other DIV

In my LabResults table, each order result is associated with a specific department: Department number 1 = Hematology Department Department number 2 = Biochemistry Department Department number 3 = Serology Department Department number 4 = Hormones Departm ...

htmlasp.net-mvcmodel-view-controller

Extend the iframe size without refreshing the HTML content leveraging solely CSS

My experience in web development is still limited, but I have a requirement to display an iframe within a larger window without refreshing the HTML content inside it. I prefer to achieve this using just JavaScript/CSS, but I'm not sure where to start. ...

javascriptjqueryhtmlcssiframe

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Creating a hyperlink in HTML is a simple yet effective way to connect web pages

Is there a way to create a link that will open a file located in a different folder, either upward or backward? Thank you! <nav class="floatfix"> <ul> <li><a href="/product/index.php">Hom ...

htmlhttp-redirecthyperlink

Customizing background size for iOS devices

This morning, I delved into research on a particular issue. Currently, I am crafting a single-page website that heavily relies on images. While Safari is usually criticized for its quirky handling of background-attachment:fixed, it seems to be working fine ...

htmlioscssbackground-image

Guide on placing a featured image in a div element within genesis theme

I'm encountering a minor issue when trying to work with the genesis framework. My objective is to have each post's featured image inside a div with the same class. I aim to be able to set a background image for the outer div so that when a user h ...

phpcsshtmlwordpressgenesis

Adjust font size using jQuery and CSS styles

I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page. Some tags on the page have font-sizes specified in percentages (%). Others are assigned sizes in pixels (px). I&apos ...

jqueryhtmlcssfonts

The validation process is still failing even though the correct credentials have been entered

I'm diving into the world of Javascript and DOM today, but I've hit a roadblock. Can you take a look at this code snippet and help me figure out what's causing me to always end up in the else block, no matter what I input in the text field? ...

javascripthtmlformsvalidation

Using the Bootstrap grid system beyond the boundaries of the div container

Struggling to place 2 input elements inside a bootstrap grid, I noticed they are positioned outside the div container, either to the left or right side. Despite my attempts, the code seems fine: <div style="max-width:500px;margin:auto;"> <di ...

htmltwitter-bootstrapgridview

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

javascripthtmlcss

The dimensions of the body are set to 100vh in height and width. However, the div inside this body has a width of either 100vh or 100%, but it is not

I am trying to create a div element that has a width equal to the viewport of the browser. However, I am encountering issues when applying the CSS property width:100vh to the body element. Here is my code snippet: body { font-family: Staatliches; fo ...

javascripthtmlcss

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss

What is the best way to ensure that a particular page on my WordPress site displays a responsive design?

The specific URL of concern is weddings.blaskphotography.com.au/photographs When accessing this page on an iPhone, I would like it to utilize the mobile stylesheet included in Woothemes' Canvas theme that I have implemented. My current setup involve ...

csswordpressresponsive-designhtmlwoothemes

Attempting to align my range picker horizontally in a single row

After selecting the date range option from my dropdown button, I noticed that the date range options are stacking on top of each other instead of appearing in the same row. Has anyone encountered this issue before? One solution I attempted was adjusting th ...

htmlcssbootstrap-4

"Animating an HTML element to track the movement of the mouse pointer

I'm currently working with an html element that looks like this: <img src="./pic/char.png" width="30" height="30" alt="me"> I'm wondering if anyone knows how to make this html element move towards the cursor using javascript. Any help wou ...

javascripthtml

Is there a way to run both PHP and HTML code using the eval function?

Is it possible to execute HTML and PHP simultaneously using the eval function? eval ("<center> this is some html </center>"); The above code does not yield the desired output, so I am considering changing it to: echo ("<center> this is ...

phphtml

Struggling with getting cards to display horizontally using React bootstrapping

I'm currently in the process of creating a portfolio website using React Bootstrapping. I'm encountering an issue where the card components I'm using to display images appear vertically instead of horizontally. I've attempted to trouble ...

javascriptcssreactjsbootstrap-4

Ways to prevent scrolling or switching to the next tab when my javascript function yields a false result

//HTML Code <div id="navigation1"> <ul> <li><a href="#"><input type="submit" value="Next" onClick="return checkfhname()" /></a></li> </ul> </div> Whenever my Javascript function checkfhname() r ...

phpjavascriptjqueryhtmlcss