0

I'm trying to add some text in the bootstrap modal footer, however the output looks like 2 divs side by side which I don't want. Below is the code :

<div class="modal fade" id="itiModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Day Wise data</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body"> </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
        Entire or partial data collected from Wikipedia.
        </div>
        </div>
    </div>
</div>

And the output looks like this:
unexpected
I want the text to appear below the buttons. I've tried putting the text in P/span tags.

2 Answers 2

1

based on questioner want to make buttons align right and text below and left align:

enter image description here

heres full code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .modal-footer{display: block}
  </style>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Bootstrap 4</h1>
  <p>Resize this responsive page to see the effect!</p> 
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#itiModal">
    Open modal
  </button>
</div>
  

  <div class="modal fade" id="itiModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Day Wise data</h4>
          
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          Modal body..
        </div>
        <div class="modal-footer">
          <div class="text-right">
            <button type="button" class="btn btn-dark">Bookmark</button>
            <button type="button" class="btn btn-dark">Details</button>
            <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
          </div>
          <p class="text-left">Entire or partial data collected from Wikipedia.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

1

You can add css code to modal footer: .modal-footer{ display: block }

enter image description here

here's full code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .modal-footer{display: block}
  </style>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Bootstrap 4</h1>
  <p>Resize this responsive page to see the effect!</p> 
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#itiModal">
    Open modal
  </button>
</div>
  

  <div class="modal fade" id="itiModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Day Wise data</h4>
          
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          Modal body..
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-dark">Bookmark</button>
          <button type="button" class="btn btn-dark">Details</button>
          <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
          <p>Entire or partial data collected from Wikipedia.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

6
  • I want the buttons to be right aligned and the text to be left aligned in the footer. Commented Nov 17, 2022 at 3:28
  • How's that! you said literally (I want the text to appear below the buttons.)
    – Mazen M.H.
    Commented Nov 17, 2022 at 11:04
  • Yes, in your pic the text is left aligned, but the buttons are left aligned too. I want the button to be right aligned. and the text to be left aligned below the buttons. Commented Nov 17, 2022 at 15:06
  • check here modal i.imgur.com/3NfzvrZ.png
    – Mazen M.H.
    Commented Nov 17, 2022 at 17:36
  • My output is same as the pic you posted above, I want something like this imgur.com/a/bt8U7Mn Commented Nov 17, 2022 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.