Word Wrapping in a button using Bootstrap 5

Question

I am trying to create a button using Bootstrap 5 which looks like this:

I went through this similar post, but couldn't find a solution.

This is the HTML code which I tried to write:

<button type="button" class="btn btn-dark btn-lg download-button text-wrap">
        <table>
          <tr>
            <td>
              <i class="fab fa-apple"></i>
            </td>
            <td>
              <span style="font-size: 10px; margin-bottom:none;"> Download on the 
              </span><br>
              <span style="font-size: 15px; margin-top: none;"> App Store
              </span>
            </td>
          </tr>
        </table>
</button>

and this is the CSS:

.download-button {
    margin: 5% 3% 5% 0;
    white-space: normal !important;
    word-break: normal;
    word-wrap: break-word;
}

This is the output that I get:

Whose height is much more than required, and there's so much gap in the first and second line.

Any help would be appreciated!

Is there a reason your are using tables? I think organizing using flexbox, would make more sense. Try to look here: https://getbootstrap.com/docs/4.0/utilities/flex/ — Danielh, Aug 03 '22 at 08:25
@Danielh No specific reason. I will try to use flex-box, didn't know about it. But still, how to resolve this issue? — V.G, Aug 03 '22 at 08:29

Danielh · Accepted Answer · 2022-08-03T10:39:23.093

I will suggest that you use flexbox. I hope that this snippet can help. But please read up on flexbox for bootstrap https://getbootstrap.com/docs/4.0/utilities/flex

You can play around with the icons and text sizes yourself :)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" async defer></script>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" async defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <button type="button" class="btn btn-dark btn-lg download-button text-wrap">
        <div style="gap: 5px" class="d-flex flex-row">
            <div class="d-flex flex-column justify-content-center">
                <i class="fab fa-apple"></i>
            </div>
            <div style="line-height:1" class="d-flex flex-column">
                <span style="font-size: 10px; margin-bottom:none;"> Download on the
                </span>
                <span style="font-size: 15px; margin-top: none;"> App Store
                </span>
            </div>
        </div>
    </button>
</body>

</html>

Thanks. It surely helps, but there's still space between the first and second line and "App Store" should be aligned a little bit to left, just below "Download" . Can you help with that? — V.G, Aug 03 '22 at 08:50
I have edited the snippet. I added "line-height: 1" to the contianer with the text, and the "gap: 5px", to the main container to make space, but I suggest that you play around yourself, with margin and spaces. Stackoverflow is for helping you with a problem, not solving your task ;) — Danielh, Aug 03 '22 at 10:41

Word Wrapping in a button using Bootstrap 5

1 Answers1