4 responsive buttons in the center of the page - html

I'll like to have a div which contains 4 buttons with some margin in the center of the page. The div container and the buttons should be responsive. I have try using differing components from bootstrap to achieve this, but with no luck... The picture below illustrate how i'll like to arrange these buttons.


You can achieve this using the following code.
<html>
<head>
<style>
.outer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner {
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
button {
height: 10vh;
width: 15vw;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<button>Hello</button>
<button>Hello</button>
<button>Hello</button>
<button>Hello</button>
</div>
</div>
</body>
</html>


Try this,
<html>
<head>
<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">
<style>
.btn{
height: 60px;
}
</style>
</head>
<body>
<div class="container-fluid bg-success">
<div class="row">
<div class="col-6"><button class="btn btn-light btn-block p-1 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-1 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-1 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-1 m-2" type="button">test</button></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>


as i understand you :)
<html>
<head>
<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">
</head>
<body>
<div class="container">
<div class="bg-primary p-2">
<div class="row">
<div class="col-6"><button class="btn btn-light btn-block p-2 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-2 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-2 m-2" type="button">test</button></div>
<div class="col-6"><button class="btn btn-light btn-block p-2 m-2" type="button">test</button></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Related

Use Bootstrap's justify-content-between and stack-to-horizontal col properly

I am designing a responsive form. My form has 1 label, 1 input field, and 5 buttons.
Both my buttons and the input field are under col-8.
I want my buttons to be placed in such a way that:
It should start placement below and at the beginning of the input field.
(imagine 2 rows under a col-8)
Space between 2 buttons are equal.
On small screen, buttons will be shown as stack.
Here are screenshots about what I want:
For normal screens
When small screens - it should be stacked
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
<div class="offset-4 form-group row">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</form>
</div>
</body>
</html>
I have tried 3 times to place the 5 buttons.
first - only row and justify-content-between
then - row and col
finally - row, col and justify-content-between
But each of them either crosses the input field width (1st screenshot) or keeps gap from input field width (2nd screenshot).
How can I properly make the 5 buttons that satisfy both justify-content-between and stack [ col inside row ] properly?
A request: I would like to have a suggestion - that doesn't excessively involved using margin and padding, since this should be good in all screen size.

Your markup has a few problems. To avoid these in the future, read each dot (bullet point) under How it works section of the Bootstrap grid section.
Here's a breakdown of what was wrong:
not all .rows were direct children of .container or .col. Because .row has negative margins, it needs a parent having horizontal "gutter" paddings to compensate the negative margins (or you could disable the gutter by applying mx-0 or no-gutters classes).
you applied .offset-4 on .row, which is designed for .cols. This is important, because by applying it to the .row you misalign all columns in that row.
to make use of .justify-content-between you don't necessarily need another level of .row + .cols. All you need is display: flex on the element, which can be applied with d-flex class.
As an alternative solution, I've changed last .row example to use a .btn-group, which is a slightly better UI solution for this type of action-bar layout. The custom CSS is mainly for switching it to vertical on mobile (which could also be achieve by applying .btn-group-vertical to it, but it doesn't sport responsive variants).
See it working:
.custom-btn-group {
width: 100%;
}
#media(max-width: 767px) {
.custom-btn-group,
.vertical-mobile {
flex-direction: column;
}
.custom-btn-group:not(#_) .btn {
margin-left: 0;
}
.custom-btn-group:not(#_) .btn:first-child {
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
}
.custom-btn-group:not(#_) .btn:last-child {
border-bottom-left-radius: .25rem;
border-top-right-radius: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<form class="bg-dark col-sm-6 py-3">
<div class="form-group row">
<label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
<div class="col-sm-9 col-md-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between vertical-mobile">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="btn-group custom-btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
</form>
</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="offset-4 col-8">
<div class="row justify-content-between" style="margin: 0%; padding: 0%;">
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">A</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-success">B</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-warning">C</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-danger">D</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">E</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I want to mention some things that worked for me:
I had to make the margin: 0% and padding: 0% each time for col-auto, if I do not, then there is a gap created like in my screenshot.
I had to put each button in col-auto then each col-auto in row. Finally, I made the row justify-content-between, and of course, margin: 0% and padding: 0% for removing unnecessary gaps.
Finally I wrapped the whole thing under offset-4 col-8 which was wrapped under row.

Bootstrap-4 justify-content-around not working for flex-column

I'm using bootstrap-4, I don't understand why justify-content-around works for flex-row and not flex-column?
I applied flex-column justify-content-around for the div.item2 and it's not working. But when I use flex-row justify-content-around for div.main it works!
How can i make it work?
I have used css only for color purpose. Here is my code:
.main{background-color:pink;}
.item1{background-color:red;}
.a{background-color:green;}
.b{background-color:yellow;}
.c{background-color:blue;}
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="main d-flex flex-row justify-content-around bd-highlight">
<div class="item1 d-flex p-2 bd-highlight">Flex item 1</div>
<div class="item2 d-flex flex-column justify-content-around bd-highlight">
<div class="a p-2 bd-highlight">Flex item 2.1</div>
<div class="b p-2 bd-highlight">
<h2 class="price-text">Flex item 2.2</h2>
<p>fermentum iaculis eu</p>
<p>lectus vestibulum mattis</p>
<p>cursus in hac</p>
<button class="btn btn-lg btn-block btn-outline-dark" type="button">Sign Up</button>
</div>
<div class="c p-2 bd-highlight">Flex item 2.3</div>
</div>
</div>
</body>

The justify-content property aligns the flexible container's items
when the items do not use all available space on the main-axis
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
In your case the items use all available space (The height of .item2 = the height of the content inside = No available space = No visual change).
Very simple code example to show this: add some height to .item2 (600px for example):
.main{background-color:pink;}
.item1{background-color:red;}
.a{background-color:green;}
.b{background-color:yellow;}
.c{background-color:blue;}
aside{
border: 5px solid green;
height: 600px;
}
#stroke{
border: 5px solid red;
}
<head>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="main d-flex flex-row justify-content-around">
<main class="item1 d-flex p-2 bd-highlight">Flex item 1</main>
<aside class="item2 d-flex flex-column justify-content-around">
<div class="a p-2 bd-highlight">Flex item 2.1</div>
<div id="stroke" class="b p-2 bd-highlight">
<h2 class="price-text">Flex item 2.2</h2>
<p>Nested item 1</p>
<p>Nested item 2</p>
<p>Nested item 3</p>
<button class="btn btn-lg btn-block btn-outline-dark" type="button">Sign Up</button>
</div>
<div class="c p-2 bd-highlight">Flex item 2.3</div>
</aside>
</>
</body>

Bootstrap Modal in a Div

I have a bootstrap modal within display: table-cell; container, but when the modal is provoked, it's not in full screen, but instead fits inside the div. How do I make it so that it fits full screen? I've been struggling with this problem for a long time, so someone please help me!
.action-delete-btn {
text-align: center !important;
position:absolute !important;
float:right;
top:10px;
}
.action-delete-btn {
display:none;
}
.action-delete-btn {
right:130px;
}
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid d-flex flex-wrap" id="word-list-container">
<button class="btn btn-danger rounded-circle action-delete-btn" id="delete-btn" type="button" data-toggle="modal" data-target="#confirmDeletionModal">
<i class="fas fa-trash-alt"></i>
</button>
<div class="modal" id="confirmDeletionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredLabel">Are you sure you want to delete this?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-danger">
Yes, delete
</button>
</div>
</div>
</div>
</div>
</div>
enter image description here

Add the below code into the CSS file
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}

How to resize bootstrap button without a side-scroll

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!

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>

How to center align icon inside button?

.close-button button {
border: 1px solid black;
border-radius: 50%;
height: 25px;
width: 25px;
outline: none;
}
.close-button {
margin-right: 50%;
margin-top: 7%;
/* I wrote to center the button */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-success">Click</button>
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content" style="height:100px;">
<div class="close-button">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>
Example:
https://www.w3schools.com/code/tryit.asp?filename=FTCZIK9F0A66
Text-align:center or line-height:50% not working. How can fix it ? Thank you.

Add the following classes
<div class="close-button h-100 d-flex align-items-center justify-content-center">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
Add font-size: 20px; on the button
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-success">Click</button>
<style>
.close-button button {
border: 1px solid black;
border-radius: 50%;
height: 25px;
width: 25px;
outline: none;
color: black;
font-size: 20px;
}
</style>
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content" style="height:100px;">
<div class="close-button h-100 d-flex align-items-center justify-content-center">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
</div>
</div>
</div>