Maintaining divs in a row with Bootstrap 4

I need help with a list item containing two divs. I want the div with the checkmark to always stay on the left side even when the screen is resized. Currently, on smaller screens, the divs stack on top of each other.

<ul>
    <li class="comment">
      <div class="likeButton d-inline-block align-top">CHECKBOX</div>

      <div class="d-inline-block">
        <div>
            <small>Username - Date</small>
        </div>
        <div class="commentContent">
            This is where the comment goes
        </div>
      </div>
    </li>   
</ul>

I initially thought that using d-inline-block or d-inline classes would solve the issue, but it doesn't.

For an example, you can refer to this link:http://www.bootply.com/ZVPZFTKJ4A

twitter-bootstrapcssbootstrap-4

Answer №1

To make your div fit correctly, try adjusting the width so that it aligns properly.

<li class="reply" data-userid="{{ reply.id }}" style="width: 80%;">
      <div class="likeButton d-inline-block align-middle">CHECKBOX</div>
          <div class="d-inline-block" style="width: 70%;/* float: left; */">
          <div>
              <small>Username - Date</small>
          </div>
          <div class="replyContent">asdasdasd</div>
      </div>
</li>

CSS:

.replyContent {
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
    width: 100%
}

Answer №2

In the end, I decided to set the parent div's position to relative.

position:relative;

Then, I adjusted the checkbox div with the following styles:

position: absolute;  
left:0;

Finally, I added a left padding to the remaining div to complete the layout.

Here is the updated Bootply link for reference: http://www.bootply.com/lfRCJKCMi6

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

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

Struggling to integrate media queries with Bootstrap 4

Highlighted below is the code snippet for one of the sections on my website: <div id="pricing" class="pricing container gap-double"> <!--Row--> <div class="row"> <div class="co ...

bootstrap-4media-queries

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4

Struggling to perfectly align a Wufoo form within an iframe using CSS

I have integrated a web form from Wufoo into my webpage using an iframe. Custom CSS can be used to style the form and I am trying to center it within the iframe. Below is the HTML code of the form displayed in the iframe: <div id="container" class="lt ...

htmlcssformsiframe

iPhone 5 Internet Browser - charcoal matte .png with transparent background

When it comes to web design, I often rely on 24-bit transparent .png files. Recently, I was reviewing a website on an iPhone 5 and noticed that all my .png files had a black matte around them. However, when I checked the same website on an iPhone 4, everyt ...

iphonecssmobile

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

What is the best way to choose specific attributes in CSS?

My website has three large CSS files, each containing many classes. Some of these classes have the same name but are defined in different files. For example: CSS1: ... .btn-primary { background: #000; } ... CSS2: ... .btn-primary { back ...

css

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

The dropdown menu is obscured by the toolbar

When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated. You can find the sta ...

htmlcssionic-frameworkbootstrap-4ionic4

Ways to horizontally align 2 rows in React

I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is th ...

javascripthtmlcssreactjsalignment

Customize Individual Rows in a React DataGrid

I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...

cssreactjsdatagridmaterial-ui

Guide on navigating to a specific section on a different page using scrolling

Adding a link for a "read more" button is simple. Just include the href attribute like this: <a href="about.html#post2">readmore</a> In my index.html page, I have implemented Bootstrap 3 with scroll animations for navbar sections. When clicki ...

htmltwitter-bootstrap-3bootstrap-4smooth-scrolling

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

htmlcsscss-float

Is there a CSS alternative to using <br clear=all> on divs that do not have set heights?

Back in the day, I used to rely on <br clear=all> at the end of a div, without specifying a height value in CSS, just to control its height. These divs would expand and contract based on the content within. Is there a more elegant approach to make ...

htmlcss

Display a div every 3 seconds with the help of jQuery

I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery? <div id="box1" style="background-color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This ...

javascriptjqueryhtmlcss

Discrepancies in media screen queries displaying on inspection tools compared to actual device

I've done some research online but I'm still struggling with this issue. Despite creating media screen queries and setting the viewport for iPhone 7 plus, the website does not display correctly on my device. When I inspect it using Chrome, every ...

cssmedia-queries

Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful. The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time i ...

cssbootstrap-5

Is the position relative malfunctioning when using display table-cell?

I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE. Here is the code snippet I have developed: <div id ...

htmlcss

Tips for positioning buttons in a circular arrangement around an image

I am having trouble creating a responsive menu around a circular image. When the screen resolution changes, the buttons do not stay aligned next to the circle picture and their position shifts. How can I ensure that these image buttons stay aligned with th ...

jqueryhtmlcss