What is the best way to achieve a column layout using Bootstrap?

Question

What is the best way to achieve a column layout using Bootstrap?

I'm having difficulty adjusting the column width in Bootstrap columns to my specific needs.

Check out this link for more information: : https://i.sstatic.net/Tvdef.png

What I'm trying to achieve is to keep the label column width fixed while allowing the textbox column to extend all the way.

UPDATE:
For clarification purposes, please refer to this image: https://i.sstatic.net/Jcv0k.png

When I simply switch from using col 5 to col 12, the width of the label also increases unexpectedly: https://i.sstatic.net/0RtSa.png

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

you have included the class "col-lg-5"

consider implementing something similar to 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>

Answer 2

you have included the class "col-lg-5"

consider implementing something similar to 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>

Answer 3

Answer №2

Here is the solution...

To achieve the desired result, you should replace

<div class="col-lg-5">

with

<div class="col-lg-12">

. It may seem confusing as 4 columns + 8 columns = 12 columns, but keep in mind that these elements will not occupy the full-window width due to the restriction imposed by

<div class="col-lg-5">

.

UPDATE

Modified 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 />

Updated CSS:

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

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

Answer 4

Here is the solution...

To achieve the desired result, you should replace

<div class="col-lg-5">

with

<div class="col-lg-12">

. It may seem confusing as 4 columns + 8 columns = 12 columns, but keep in mind that these elements will not occupy the full-window width due to the restriction imposed by

<div class="col-lg-5">

.

UPDATE

Modified 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 />

Updated CSS:

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

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

Answer 5

Answer №3

I decided to create my own unique classes to meet the specific width requirements I had.

After comparing with the bootstrap column layouts 1 - 12, I found that I needed widths of 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%;
}

Answer 6

I decided to create my own unique classes to meet the specific width requirements I had.

After comparing with the bootstrap column layouts 1 - 12, I found that I needed widths of 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%;
}

Answer 7

Answer №4

If you wanted to, you have the option to completely remove the first col and the second row like so.

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

To finalize this design, you can wrap all of it in a container.... It's worth mentioning that using container-fluid will expand the width to full screen rather than a centered, narrower container. Omitting a container will result in the content being at the edges of the screen.

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

Answer 8

If you wanted to, you have the option to completely remove the first col and the second row like so.

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

To finalize this design, you can wrap all of it in a container.... It's worth mentioning that using container-fluid will expand the width to full screen rather than a centered, narrower container. Omitting a container will result in the content being at the edges of the screen.

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

What is the best way to achieve a column layout using Bootstrap?

Answer №1

Answer №2

UPDATE

Answer №3

Answer №4

Similar questions

Struggling to center an image within a CSS border

show a list of checkboxes that have been selected using JavaScript

Using Angular 8 to Pass Form Data to Another Component via a Service

Mobile media queries are ineffective despite implementing the viewport meta tag

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

Modifying the appearance of select components in React MUI using CSS

Button Fails to Respond on Second Click

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

Align Text Center inside a Magical H1 Heading Tag

ng-repeat is not functioning properly despite the presence of data

Preventing attribute or tag cloning in Jquery: What you need to know

Adjust the color of the text in Ionic based on the condition

Scrolling container embedded within a parent with absolute positioning

Issue with applying CSS properties of 'top' and 'left' to a dynamically created div using

Ways to update a specific div upon clicking an image

What is the best way to add a background image to a div without a fixed height in order for it to span the full width and

Excessive content spilling over the div container

Is there a way to continuously switch a CSS animation class without needing a second click?

Issues with Collision Detection between Canvas Rectangles and Balls

Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported