Troubleshooting problem with Bootstrap 4 columns alignment - issue with nested columns wrapping

I attempted to create a column layout using Bootstrap 4, but unfortunately, the alignment is off. The nested columns do not display properly and the last one even breaks to a new line.

<div class="row">
    <div class="col-sm-3">
      <div class="row">
        <div class="col-sm-4">
          <label class="col-form-label custom-label" for="idNo">Name Label</label>
        </div>
        <div class="col-sm-1">
          <label class="col-form-label">:</label>
        </div>
        <div class="col-sm-7">
          <label class="col-form-label">Value Label</label>
        </div>
      </div>
    </div>
    <div class="col-sm-9"></div>
  </div>[see image above][1]
csstwitter-bootstrapbootstrap-4

Answer №1

The col-sm-3 does not have enough width to accommodate the content and padding of the 3 columns, causing them to stack vertically. To prevent this, you can modify the padding on the columns within the row. Bootstrap 4 offers a no-gutters class specifically for this purpose...

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="row no-gutters">
                <div class="col-sm-4">
                    <label class="col-form-label custom-label" for="idNo">Label Name</label>
                </div>
                <div class="col-sm-1">
                    <label class="col-form-label">:</label>
                </div>
                <div class="col-sm-7">
                    <label class="col-form-label">Label Value</label>
                </div>
            </div>
        </div>
        <div class="col-sm-9"></div>
    </div>
</div>

Additionally, Bootstrap 4 provides padding utility classes that allow you to adjust padding on individual columns as an alternative solution.

Answer №2

<div class="wrapper">
<div class="content">
    <div class="col-md-3">
        <ul class="list-inline">
            <li class="item">
                <label class="form-label custom-label" for="idNumber">Name Tag</label>
            </li>
           <li class="item">
                <label class="form-label">:</label>
            </li>
           <li class="item">
                <label class="form-label">Data Label</label>
            </li>
        </ul>
    </div>
    <div class="col-md-9"></div>
</div>

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

Which is the ideal library for creating this specific chart - shown in the image in the description - in reactjs?

After numerous unsuccessful attempts, I have finally decided to seek help in creating this chart. I would highly appreciate any assistance that can be provided. https://i.sstatic.net/jtQ3I.jpg ...

cssreactjscanvashtml5-canvaschart.js

Target the select element with a specific style applied, but restrict it to only be selected when nested within a div that shares the same style

Not quite sure about the effectiveness of the title, but here's what I'm attempting to accomplish. <div class="mystyle"> <select name="somename" id="somename"> <option value="Value1"> <option value="Value2" ...

css

Can using display: none impact the SEO of a website's navigation menu?

Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...

jquerycssseomenu

Tips for changing the display of input type submit value on hover using CSS in a React Component

I need help with a form that has an <input type="submit" element where the value is set dynamically based on currIntValue. My goal is to change the displayed value to 'Search' when hovering over the input, instead of showing currIntValue. I ...

cssreactjssass

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

csssafaricross-browser

Only half of the image is responsive to hover effects

Just starting out with coding and running into an issue... My social media icons are supposed to turn pink on hover using a second image, but for some reason it's only showing up on the bottom half. Any suggestions? CSS: a.twitter:hover { backgr ...

htmlcss

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

htmlcssextjssencha-touchsencha-touch-2

Implementing conditional styling in Vue.js using v-bind based on specific Bootstrap breakpoints

Is there a way to dynamically assign styles based on different bootstrap breakpoints using v-bind style directive with vue? I'm encountering an error in the console that says "Whitespace was expected." <div class="footer" :style="{$b ...

javascriptvue.jsif-statementbootstrap-4vue-directives

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

htmlcssaccessibilityanchor

I am looking to incorporate a scroll feature into my form, as it is being displayed within a modal that is a separate component

Due to the size of my employee form exceeding the screen capacity, I need to incorporate a scroll property into my modal content. The form contains numerous fields that cannot be modified. Could you assist me in resolving the scrolling issue? Thank you! ...

cssreactjs

Ensuring full height on Bootstrap 4 columns without triggering a scrollbar in the browser

I'm currently working with Bootstrap 4 and attempting to make 3 columns on the page fill 100% height, only displaying scrollbars within the columns and not on the entire page. I have experimented with applying h-100 to the row div, as well as implemen ...

htmlcsstwitter-bootstrapbootstrap-4

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

Hey there, I have a hidden div containing a range input: <div id="hiddencontainer" style="display:none;"> <input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/> </div> The ...

javascripthtmlcssdominput

Should all images be set to 100% width with a standard Bootstrap configuration?

For my website project, I decided to incorporate the Bootstrap carousel into the header using version 3.0.3 of Bootstrap. Everything seemed to be functioning correctly until I noticed a strange issue with the image sizes on the page. Initially, all the ima ...

htmlcsstwitter-bootstrapresponsive-designcarousel

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

javascriptjqueryhtmlcss

disabling past dates in Bootstrap calendar

How can I disable past dates in Bootstrap easily? <script type="text/javascript"> $(function(){ $('.datepicker').datepicker(); }); </script> Date: <input type="text" class="datepicker"></input> I have added the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

What is the best way to enclose a word within a div tag?

I am currently developing a project using the jQuery mobile framework. I have a specific structure that I would like to present in a table-like layout: <div style="word-wrap:break-word" class="ui-block-n" ><li>verylongword.........</li> ...

csshtmlhtml-lists

Creating a CSS Grid with Full-Width Columns and Consistent Margins

Currently, I am attempting to create a responsive grid with 4 columns that expands to the entire width of the screen on desktop displays. However, when I introduce margins to space them out evenly, I encounter an issue where the last column either doesn&ap ...

htmlcssgrid

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

While there are no errors showing up in the Chrome Developers Error code, I am facing an issue with my form where the text fields are not visible. It should be a simple task, but it has turned into a headache for me. I would greatly appreciate any help i ...

javascripthtmlcsslaravel-5bootstrap-4

Adjust the date input alignment in mobile browsers

I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example This is the code I have been working on: .co ...

htmlcss