CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
cooooool
cooooool

Reputation: 425

How can I prevent Bootstrap button text from wrapping to a new line?

I want to create a navbar using bootstrap, and I am struggling to make buttons look good. For some reason after inserting space into the button text bootstrap adds new line in between two words. That looks bad, how can I fix it? With this code I get this:

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

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary" type="submit">Test</button>
    </form>
  </div>
</nav>

However, after adding space inside button text I get this:

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

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary" type="submit">T est</button>
    </form>
  </div>
</nav>

How do I make it in one line even with space?

Upvotes: 1

Views: 1556

Answers (1)

isherwood
isherwood

Reputation: 61063

Bootstrap's containers are flexbox elements. This means that the button will collapse to take its smallest horizontal space. You can use text wrap utility classes to prevent this.

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

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary text-nowrap" type="submit">T est</button>
    </form>
  </div>
</nav>

Upvotes: 1

Related Questions