title: Display responsive header in single line using Bootstrap (Reactstrap)
body: <p>I am making a react app with Reactstrap css framework and the <code>js</code> file looks,</p>
  
  <p><strong>Example.Js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    Container,
    Button,
    Badge
  } from "reactstrap";
  
  const links = [
    { href: "#home", text: "Home" },
    { href: "#card", text: "Product" },
    { href: "#about", text: "About" },
    { href: "#cata", text: "Categories" },
    { href: "#test", text: "Blogs" },
    { href: "#test2", text: "News" },
    { href: "#busns", text: "Adds", className: "btnadd" },
    { href: "/login", text: "LOGIN" }
  ];
  
  const createNavItem = ({ href, text, className }) =&gt; (
    &lt;NavItem&gt;
      &lt;NavLink href={href} className={className}&gt;
        {text}
      &lt;/NavLink&gt;
    &lt;/NavItem&gt;
  );
  
  export default class Example extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isOpen: false
      };
  
      this.toggle = this.toggle.bind(this);
    }
  
    toggle() {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Container&gt;
            &lt;Navbar light expand="md" className="navbar-style"&gt;
              &lt;NavbarToggler onClick={this.toggle} /&gt;
              &lt;NavbarBrand href="/"&gt;
                &lt;img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" /&gt;
              &lt;/NavbarBrand&gt;
              &lt;NavbarBrand href="/"&gt;The Big brand title will be displayed here !&lt;/NavbarBrand&gt;
              &lt;Collapse isOpen={this.state.isOpen} navbar&gt;
                &lt;Nav className="ml-auto" navbar&gt;
                  {links.map(createNavItem)}
                &lt;/Nav&gt;
              &lt;/Collapse&gt;
              &lt;Nav className="ml-auto" navbar&gt;
                &lt;NavItem className="cart-wrapper"&gt;
                  &lt;Button className="cart-style" color="primary" size="sm"&gt;
                    Cart
                  &lt;/Button&gt;
                  &lt;Badge className="badge-style"&gt; 10 &lt;/Badge&gt;
                &lt;/NavItem&gt;
              &lt;/Nav&gt;
            &lt;/Navbar&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here for normal view it is fine but while we view it in responsive view, the toggler in first row, the navbar logo was moved to next row then navbar title (little bigger in characters) in another row and finally cart button with badge in another row.</p>
  
  <p>So the above one needs to be changed into a single line in responsive (Mobile view).</p>
  
  <p>It should look like,</p>
  
  <pre><code>---------------------------------------------------------
  
  toggle-button  brand-icon brand-title  cart-button-badge 
  
  ---------------------------------------------------------
  </code></pre>
  
  <p>The brand title can be displayed by break line like,</p>
  
  <pre><code>------------------------------------------------------------------------
  
  toggle-button  brand-icon   The Big brand title        cart-button-badge 
                              will be displayed here !
  
  ------------------------------------------------------------------------
  </code></pre>
  
  <p>Kindly help me to achieve the above mentioned result of making the header to display in a single line when viewed in responsive.</p>
  
  <p><strong>Working Example:</strong> <a href="https://stackblitz.com/edit/reactstrap-navbartoggler-example-mhvfmc" rel="nofollow noreferrer">https://stackblitz.com/edit/reactstrap-navbartoggler-example-mhvfmc</a></p>
  
  <p>Even for normal bootstrap itself I am facing this issue, </p>
  
  <p><strong>Pure Bootstrap Ref:</strong> <a href="https://codepen.io/Maniraj_Murugan/pen/NWPaQGB" rel="nofollow noreferrer">https://codepen.io/Maniraj_Murugan/pen/NWPaQGB</a></p>
  
  <p>The below given image is the reference that I already have in my old application which uses MUI css but now I need to replace the same with bootstrap and need to have exactly the same output as like given below screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/BMDEL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BMDEL.png" alt="enter image description here"></a></p>