Centering a text on bootstrap navbar

Question

I am trying to center a text in my bootstrap navbar that looks like this:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid text-center"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left" aria-hidden="true"></i> <span>Toggle Sidebar</span> </button> <div class="nav navbar-nav" id="loggedInCheck" style="margin:0 auto;text-align: right;important:display; flex:flex-direction; column:justify-content; right;"> <h3>Text To Center</h3> </div> <ul class="nav navbar-nav ml-auto " id="loggedInCheck" "> <span class="mr-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <div class="mx-auto d-flex"> <strong id="navUserName">Joe Schmoe</strong> <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a> </div> </span> </div> <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select> </div> </span> </ul> </div> </nav>

I want to center the h3 that contains the text "Text to Center". I do not want to use absolute positioning on the div because in mobile devices the navigation items will come on top of each other.

I have tried to dd text-align:center and also tried to send the text to the right to make it seem like it is in the center of the screen but it did not work either.

Answer 1

remove ml-auto from #loggedInCheck and replace your inline style with mx-auto

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid text-center"> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left" aria-hidden="true"></i> <span>Toggle Sidebar</span> </button> <div class="nav navbar-nav mx-auto " id="loggedInCheck"> <h3>Text To Center</h3> </div> <ul class="nav navbar-nav " id="loggedInCheck"> <span class="mr-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <div class="mx-auto d-flex"> <strong id="navUserName">Joe Schmoe</strong> <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a> </div> </span> </div> <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select> </div> </span> </ul> </div> </nav>

Answer 2

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <nav aria-label="breadcrumb "> <div class="row mt-2"> <div class="col-lg-4 col-md-4 col-5 ml-2"><button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left" aria-hidden="true"></i> <span>Toggle Sidebar</span> </button> </div> <div class="col-lg-4 col-md-3 col-6 "><h3>Text To Center</h3></div> <div class="col-lg-3 col-md-4 col-3 ml-5"> <ul class="nav navbar-nav ml-auto " id="loggedInCheck"> <span class="mr-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <div class="mx-auto d-flex"> <strong id="navUserName">Joe Schmoe</strong> <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a> </div> </span> </div> <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select> </div> </span> </ul> </div> </div> </nav>