"col" and "row" responsive

Question

I'm working with Bootstrap 4 and what I want to do is the picture below:

When I'm trying to achieve it, the result is like this:

.

This happens on screens with a screen width greater than 1200px. I tried to delete row and col. I have not found out what the problem is.

JS Fiddle link here.

<div class="row">
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col-lg-4">
                    <label>Text Label</label>
                </div>
                <div class="col-lg-8">
                    <input class="form-control input-sm"  type="text">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">

            </div>
        </div>
...

Answer 1

Columns in Bootstrap aren't responsive in the sense that they will intelligently adjust based on the content within (at least not always). Instead they collapse at certain breakpoints into predefined widths.

Your <label> is long enough that at certain breakpoints it cannot fit on one line and so... it won't. The easiest way to resolve that is to add additional column breakpoint classes to your HTML.

Note - you'll need to view the snippet below in its larger container to see how it collapses / expands.

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

<div class="container-fluid" style="background-color: lightblue">
   <div class="row">
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>

     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>

     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
  
     <div class="col-lg-3">
       <div class="row">
        <label class="col-4 col-md-5 col-form-label">Text Label</label>
         <div class="col-8 col-md-7">
           <input class="form-control input-sm" type="text">
         </div>
       </div>
    </div>
    
  </div>
</div>

Answer 2

Before using the grid system, you need to use first a container.

You can use .container if you want your rows in a fixed width, or .container-fluid if you want your rows in full width.

In the case of your code in the fiddle, replace the first .row class with one of the two mentioned classes:

Option 1: .container

<div class="container" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Columns and content of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Columns and content of Row 2 -->
        </div>
    <div>
</div>

See it in action in this fiddle.

Option 2: .container-fluid

<div class="container-fluid" style="background-color: lightblue">
        <!-- Row 1 -->
        <div class="row">
            <!-- Labels and Inputs of Row 1 -->
        </div>
        <!-- Row 2 -->  
        <div class="row">
            <!-- Labels and Inputs of Row 2 -->
        </div>
    <div>
</div>

See it in action in this fiddle.

See also: Grid System (Bootstrap 4 Documentation)

Answer 3

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  </head>
  <body>   
      <main class="container">
        <div class="row" style="background-color: lightblue">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
        </div>
        <div class="row"  style="background-color: lightskyblue">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <label class="col">Text Label</label><input class="col form-control" type="text">
            <div class="col"></div><div class="col form-control invisible"></div>
            <div class="col"></div><div class="col form-control invisible"></div>
            <div class="col"></div><div class="col form-control invisible"></div>
        </div>
      </main>
  </body>
</html>