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

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 >
  <div >
    <form  role="search">
      <input  type="search" placeholder="Search" aria-label="Search">
      <button  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 >
  <div >
    <form  role="search">
      <input  type="search" placeholder="Search" aria-label="Search">
      <button  type="submit">T est</button>
    </form>
  </div>
</nav>

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

CodePudding user response：

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 >
  <div >
    <form  role="search">
      <input  type="search" placeholder="Search" aria-label="Search">
      <button  type="submit">T est</button>
    </form>
  </div>
</nav>