Flexbox or Bootstrap 4 Grid: Which is the Better Choice?

My form is structured as follows:

<div class="row">
    <div class="col">
        <textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
    </div>
    <div class="col">
        <div class="row">
            <div class="col">
                <button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>   
            </div>
        </div>
    </div>
</div>

I'm utilizing Bootstrap 4, and I want the form to occupy the maximum width of its container, with the textarea expanding and buttons remaining a fixed width. However, using the current setup results in empty gaps due to column widths mismatch. How can I ensure that the form fills the screen width while keeping button columns at a fixed width?

I suspect that flexbox and d-flex classes might help achieve this, but I'm struggling to make it work.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

apply flex-grow-0 to the buttons column:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <textarea name="comment" class='form-control' placeholder='Enter your new comment here..'></textarea>
    </div>
    <div class="col flex-grow-0">
      <div class="row">
        <div class="col">
          <button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

To make adjustments, remove .col and replace with d-flex and flex-grow-1.
Additionally, include a margin-left by using ml-3 for the buttons.

<div class="row mw-100">
    <div class="d-flex flex-grow-1">
        <textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea>
    </div>
    <div class="ml-3">
        <div class="row">
            <div class="col">
                <button class="btn btn-secondary btn-sm" type='button'><span class="fa fa-times mr5"></span>Cancel</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <button class="btn btn-primary btn-sm mt5" name='new_comment' type='submit'><span class="fa fa-plus mr5"></span>Save</button>   
            </div>
        </div>
    </div>
</div>

Adjust the width of the buttons container as needed.

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

When the width is set to 100vh, there is excessive white space beneath the div

I'm dealing with a unique situation where I have a horizontal scrollable div containing different elements. To achieve the horizontal scroll, I've set the width: 100vh and rotated the div. However, this is causing an unwanted white space below th ...

htmlcss

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

Issue with redirecting to success page

I'm facing an issue with my form validation. After submitting the form, it's not validating and redirecting to the success page as expected. Here is the code snippet, can anyone assist me in resolving this problem? Here is the detailed validatio ...

reactjsbootstrap-4react-bootstrap

Web Audio API functions are encountering a playback issue on iOS 13.3, despite working smoothly on previous iOS versions

I have been developing an audio visualizer using the web audio API. It was functioning smoothly on PC, however, after upgrading to iOS 13.3, it no longer operates on Apple mobile devices. The root cause of this issue remains a mystery to me. The problem s ...

javascripthtmliosweb-audio-api

The dropdown feature on my theme seems to be malfunctioning on Wordpress

I'm having trouble figuring out what I'm doing wrong. The dropdown navigation works fine with the default Wordpress twentyeleven theme, but when I switch to my custom theme, the dropdown stops appearing. Here is the code I'm using: <div ...

javascriptjqueryhtmlwordpress

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

cssreactjsantdant-design-proant-design-vue

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

htmlcssweb

Is the Pure CSS hide/show technique using radio buttons causing a challenge with parent and descendant elements?

Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...

htmlcsscss-selectorsshow-hide

How to Retrieve the td value of an element located below an input tag using jQuery

I'm working with this sample HTML code snippet: <tr> <td align="center" headers=" " class="data"><input type="checkbox" name="the-id" value="4222816"></td> <td headers="HDR1" class="data">RED</td> <t ...

jqueryhtml

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

Align the radio button group in the center with corresponding labels

I have several radio buttons with labels that vary in length. I am trying to figure out how to center them horizontally so that the labels are centered on the page, but still appear as if they are left-aligned. Desired result: Current HTML snippet: < ...

htmlcssradio-button

Avoid changing the button color to a lighter shade when it is clicked

Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...

htmlcssangularionic-frameworkionic5

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

phphtmlsession

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax

What is the process for including id parameters within the URL of an HTML page?

As I work on building a website with ReactJS and webpack, I encounter the need to access URL parameters. One specific challenge I face is creating a universal blog post view page that can be dynamically loaded based on the blog id parameter in the URL. Rat ...

javascripthtmlreactjs

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

I don't have much experience with CSS, but I'm really eager to customize the appearance of my chart. The chart is generated by a vue.js library and comes with pre-defined CSS classes. However, I'm uncertain about how to access and modify the ...

cssvue.jscharts

How can you set up a button to trigger an action only after reaching a specified number of clicks?

Is it possible to create a button in HTML that remains inactive until a specific number of clicks have been registered? Imagine a scenario where a button does nothing when clicked until it has been tapped 100 times. Upon the 100th click, it redirects to a ...

htmlbuttonclick

The redirection from HTTP or www to HTTPS is not functioning as expected

Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...

javascriptjqueryhtml.htaccess

Updating a specific row in a table using PHP and SQL

I am having an issue with updating rows in a table that pulls information from a database. Each row has an input tag labeled COMPLETE, which the user can click on to update the database by changing a boolean field from 0 to 1. However, I am facing a prob ...

phphtmlmysql

Attempting to modify the contents of a div by utilizing the CSS :hover pseudo-class

I recall seeing this technique used before, but I am struggling to remember where. My goal is to modify the content of a div when the css :hover state is activated. Below is the CSS code that I am attempting to make work: .mWin_close:hover div.new-label ...

htmlcss