CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Akshay Rajpaul
Akshay Rajpaul

Reputation: 358

How can I get this column layout using Bootstrap?

I'm struggling to get a specific column width using Bootstrap columns.

https://www.codeply.com/p/SSBBdBMXNc: enter image description here

From the above, I want to maintain the label column width but the textbox column needs to extend all the way to the end.

UPDATE:
To be more clear: enter image description here

Simply switching from col 5 to 12 also increases the width of label: enter image description here

Upvotes: 1

Views: 291

Answers (4)

Akshay Rajpaul
Akshay Rajpaul

Reputation: 358

I ended up creating my own custom classes for the desired widths I required.

Relative to the bootstrap column layouts 1 - 12, the widths I needed worked out to 1.6644 and 10.3356.

.col-1_6644,
.col-10_3356 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1_6644 {
    width: 13.87%;
}

.col-10_3356 {
    width: 86.13%;
}

https://codeply.com/p/SSBBdBMXNc

Upvotes: 1

Rok Benko
Rok Benko

Reputation: 23128

Here you go...

You need to change <div class="col-lg-5"> to <div class="col-lg-12"> if you want to achieve this. You might be confused because 4 columns + 8 columns = 12 columns, but these two elements will not take full-window width because they are limited with <div class="col-lg-5">.

UPDATE

HTML:

<br />
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2" id="label">label</div>
        <div class="col-lg" id="textbox">textbox</div>
    </div>
</div>
<br />

CSS:

div:not(.row) {
    border: 1px solid red;
}

@media only screen and (min-width: 1200px) {
    #label {
        width: 13vw;
    }
}

Upvotes: 1

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1144

You could remove that first col and the second row completely if you wanted to, like this.

  <div class="row">
      <div class="col-lg-4">label</div>
      <div class="col-lg-8">textbox</div>
  </div>

You can also put all that in a container to finish it off nicely..... Worth noting that if you use container-fluid instead it will be more of a full screen width rather than a thinner container centered in the screen. If you don't use a container at all, everything above will be at the edges of your screen.

<div class="container">
   <div class="row">
      <div class="col-lg-4">label</div>
      <div class="col-lg-8">textbox</div>
   </div>
</div>

Upvotes: 0

Haseeb hanif
Haseeb hanif

Reputation: 131

you have added class="col-lg-5"

you should try something like this:

<div class="col-lg-12">
        <div class="row">
            <div class="col-lg-4">label</div>
            <div class="col-lg-8">textbox</div>
        </div>
    </div>

Upvotes: 3

Related Questions