CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Chud37
Chud37

Reputation: 5017

Bootsrap 4 Grid or Flex

I have a form that looks like the following:

<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 using Bootstrap 4. The thing is, I want this form to be the max width of its container - to have the textarea stretch and the buttons be a static width. If I use the above, I get a big empty gap because the smallest col (col-1) is to wide for the buttons. How can I have it fill the width of the screen with the button columns remaining a fixed width?

I have a feeling its using flex and d-flex but I cant manage to get it work.

Upvotes: 0

Views: 85

Answers (2)

Temani Afif
Temani Afif

Reputation: 273640

add flex-grow-0 to 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='Type 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>

Upvotes: 1

Henfs
Henfs

Reputation: 5411

You can remove .col and use d-flex and flex-grow-1.
Then, you can also add a margin-left using ml-3 to 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>

For the buttons container, you can set the width you want.

Upvotes: 1

Related Questions