Question 293888 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap 5.3.2 modal footer left-padding or left-margin?

I want to make modal that looks like a chat box. I did most of the work already but the input area is not fixed. Ideally, I want the input text to be on the footer but the modal footer seem to have an invisible left margin or padding and I can’t get rid of it through CSS. I want the whole of the modal footer field to be occupied.

I tried setting is its padding and margin to 0 but to no-avail.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
      <h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="chatbox">
        <p class="chat1">Hi! I really like your picture!</p>
        <div class="clear"></div>
        <p class="chat2">
          Thanks! I love yours, btw. You look busy with work.
        </p>
        <div class="clear"></div>
        <p class="chat1">
          I do. Thank goodness THWP is for busy people like us.
        </p>
        <div class="clear"></div>
        <p class="chat2">Loving this app. It's lovable with you in it.</p>
        <div class="clear"></div>
        <p class="chat1">LOL. Where you at right now? Work?</p>
        <div class="clear"></div>
        <p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
        <div class="clear"></div>
        <p class="chat1">That's just a 15-min drive from here!</p>
        <div class="clear"></div>
        <p class="chat2">Nice! You free today?</p>
        <div class="clear"></div>
        <p class="chat1">Sadly, no.</p>
        <div class="clear"></div>
        <p class="chat2">Bummer.</p>
        <div class="clear"></div>
        <p class="chat1">I'm free this Saturday. Maybe, we could...</p>
      </div>
    </div>
    <div class="modal-footer justify-content-between">
      <form>
        <label for="message-text"></label>
        <div class="input-group">
          <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
          <div class="input-group-append">
            <a href="#" class="btn input-group-text"><span
                      class="material-symbols-rounded align-middle"
                      id="send-button"
                      >send</span
                    ></a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
Tags:

2

Answers


  1. 0

    This can also be accomplished using existing bootstrap classes. .p-0 can be used to set padding to 0, and .m-0 can be used to set margins to 0. .w-100 can be used to set the width to 100%. This may look something like this:

    <div class="modal-footer justify-content-start p-0 m-0">
    <form class="w-100">
        <div class="input-group">
            <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
            <div class="input-group-append">
                <a href="#" class="btn input-group-text">
                    <span class="material-symbols-rounded align-middle" id="send-button">send</span>
                </a>
            </div>
        </div>
    </form>
</div>

    And below is a working example:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
      <h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="chatbox">
        <p class="chat1">Hi! I really like your picture!</p>
        <div class="clear"></div>
        <p class="chat2">
          Thanks! I love yours, btw. You look busy with work.
        </p>
        <div class="clear"></div>
        <p class="chat1">
          I do. Thank goodness THWP is for busy people like us.
        </p>
        <div class="clear"></div>
        <p class="chat2">Loving this app. It's lovable with you in it.</p>
        <div class="clear"></div>
        <p class="chat1">LOL. Where you at right now? Work?</p>
        <div class="clear"></div>
        <p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
        <div class="clear"></div>
        <p class="chat1">That's just a 15-min drive from here!</p>
        <div class="clear"></div>
        <p class="chat2">Nice! You free today?</p>
        <div class="clear"></div>
        <p class="chat1">Sadly, no.</p>
        <div class="clear"></div>
        <p class="chat2">Bummer.</p>
        <div class="clear"></div>
        <p class="chat1">I'm free this Saturday. Maybe, we could...</p>
      </div>
    </div>
    <div class="modal-footer justify-content-start p-0 m-0">
      <form class="w-100">
        <div class="input-group">
          <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
          <div class="input-group-append">
            <a href="#" class="btn input-group-text">
              <span class="material-symbols-rounded align-middle" id="send-button">send</span>
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    There two things you must to know:

    1. The modal footer has a padding so you need set it to cero with p-0 or px-0.
    2. The form is not 100% width so you need set w-100 class.

    So I did this changes to your code:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
      <h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="chatbox">
        <p class="chat1">Hi! I really like your picture!</p>
        <div class="clear"></div>
        <p class="chat2">
          Thanks! I love yours, btw. You look busy with work.
        </p>
        <div class="clear"></div>
        <p class="chat1">
          I do. Thank goodness THWP is for busy people like us.
        </p>
        <div class="clear"></div>
        <p class="chat2">Loving this app. It's lovable with you in it.</p>
        <div class="clear"></div>
        <p class="chat1">LOL. Where you at right now? Work?</p>
        <div class="clear"></div>
        <p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
        <div class="clear"></div>
        <p class="chat1">That's just a 15-min drive from here!</p>
        <div class="clear"></div>
        <p class="chat2">Nice! You free today?</p>
        <div class="clear"></div>
        <p class="chat1">Sadly, no.</p>
        <div class="clear"></div>
        <p class="chat2">Bummer.</p>
        <div class="clear"></div>
        <p class="chat1">I'm free this Saturday. Maybe, we could...</p>
      </div>
    </div>
    <div class="modal-footer justify-content-between px-0">
      <form class="w-100">
        <label for="message-text"></label>
        <div class="input-group">
          <input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
          <div class="input-group-append">
            <a href="#" class="btn input-group-text"><span
                      class="material-symbols-rounded align-middle"
                      id="send-button"
                      >send</span
                    ></a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search