'Bootstrap columns not working with width adjustment

I want to display two input areas next to each other with one taking less space than the other. This is what I have now but somehow it won't work.

 <div class="row">
        <div class="input-group input-group-sm mb-3 fitContent col-xs-8">
            <span class="input-group-text">Reihentitel</span>
            <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
        <div class="input-group input-group-sm mb-3 fitContent col-xs-4">
            <span class="input-group-text">Bandaufführung</span>
            <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>

When I just use the .col class it splits the two div tags evenly across the screen. With for example the .col-xs-8 and .col-xs-4 it is displayed one below the other.

Now I put the input-group into an other div which has the .col class but it is the same as before.

<div class="row">
    <div class="col-xs-8">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Reihentitel</span>
          <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Bandaufführung</span>
          <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>
</div>
htmlbootstrap-4


Solution 1:[1]

When you read the documentation you will see that the smallest columns don't need any prefixes anymore. This is because this is the default width and you don't need any prefixes for a default.

In other words: col-xs-4 becomes just col-4 (since it is 4-width on all sizes, not only xs)

My advice from the comments to not mix column-classes with other classes is still something I highly recommend. It is too easy to just overwrite column styling and have the layout break if you do it otherwise.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row">
    <div class="col-8">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Reihentitel</span>
          <input type="text" class="form-control" id="inputReihentitel" input>
        </div>
    </div>
    <div class="col-4">
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text">Bandaufführung</span>
          <input type="text" class="form-control" id="inputBandaufführung" input>
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cloned

Related Questions