How to resize bootstrap button without a side-scroll - html

Question

I am very new to CSS responsive layouts and need help structuring my navbar. I am aware that there are many other similar SO Q&As, but none of them give me the desired output.
I tried using the suggestion from this SO question, but instead of the buttons resizing, a scrollable scrollbar appears upon window resize which is not what I want.
Here's what my HTML code looks like at the moment:
.nowrap{white-space: nowrap;}
.column2 {
float: left;
width: 33%;
text-align: center;
overflow:auto;
}
.column3 {
float: center;
width: 33%;
text-align: right;
}
.column4 {
float: right;
width: 33%;
text-align: right;
overflow:auto;
}
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://bootswatch.com/4/united/bootstrap.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="row">
<div class="container">
<div class="column2"><h4 >Welcome back <span>Example</span></h4></div>
<div class="column3">
<h1 style="font-size:2.5vw;" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="column4" >
<div class="col-md-6 col-md-offset-3 responsive nowrap">
<button type="button" class="btn btn-danger btn-responsive">Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</nav>
Summary of button requirements:
The three buttons in the same row
Buttons responsively get smaller without the need to scroll.
The content in the three <div> tags don't overlap
Please do take into consideration that I am very new to CSS styling and so would appreciate all the constructive feedback!

Answer 1

You can use bootstrap 3 classes. Is that close to what you try to achieve?
(Edit snippet per comments:)
.nowrap{white-space: nowrap;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4 text-left"><h4 >Welcome back <span>Example</span></h4></div>
<div class="col-xs-2 col-sm-4 text-center">
<h1 style="font-size:2.5vw;" onclick="about()" title='About'>Example<span class="text-primary">TEXT</span>Example</h1>
</div>
<div class="col-xs-7 col-sm-4 text-right">
<div>
<button type="button" class="btn btn-danger btn-responsive" onclick="search()" >Search</button>
<button type="button" class="btn btn-primary btn-responsive" id="logoutButton " >Logout</button>
<button type="button" class="btn btn-primary btn-responsive" data-toggle="modal" data-target="#loginModal" >Login</button>
</div>
</div>
</div>
</div>
</nav>