Mixing
How do I center a form in a navbar? [duplicate]
-2
This question already has an answer here:
Center an element in Bootstrap 4 Navbar
8 answers
Bootstrap NavBar with left, center or right aligned items
8 answers
I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.
I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)
Current:
Current result
What I want:
What I want/Expected
html css twitter-bootstrap bootstrap-4
asked Jan 1 at 12:52
tujemacictujemacic
32
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 14:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-2
This question already has an answer here:
Center an element in Bootstrap 4 Navbar
8 answers
Bootstrap NavBar with left, center or right aligned items
8 answers
I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.
I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)
Current:
Current result
What I want:
What I want/Expected
html css twitter-bootstrap bootstrap-4
asked Jan 1 at 12:52
tujemacictujemacic
32
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 14:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-2
-2
-2
This question already has an answer here:
Center an element in Bootstrap 4 Navbar
8 answers
Bootstrap NavBar with left, center or right aligned items
8 answers
I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.
I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)
Current:
Current result
What I want:
What I want/Expected
html css twitter-bootstrap bootstrap-4
asked Jan 1 at 12:52
tujemacictujemacic
32
This question already has an answer here:
Center an element in Bootstrap 4 Navbar
8 answers
Bootstrap NavBar with left, center or right aligned items
8 answers
I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.
I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)
Current:
Current result
What I want:
What I want/Expected
This question already has an answer here:
Center an element in Bootstrap 4 Navbar
8 answers
Bootstrap NavBar with left, center or right aligned items
8 answers
html css twitter-bootstrap bootstrap-4
html css twitter-bootstrap bootstrap-4
asked Jan 1 at 12:52
tujemacictujemacic
32
asked Jan 1 at 12:52
tujemacictujemacic
32
asked Jan 1 at 12:52
tujemacictujemacic
32
asked Jan 1 at 12:52
tujemacictujemacic
32
asked Jan 1 at 12:52
tujemacictujemacic
32
32
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 14:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Zim bootstrap-4
Users with the bootstrap-4 badge can single-handedly close bootstrap-4 questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 14:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
<form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass
Edit =>
<div style="margin: 0 auto;"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
You can also do
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div style="float:right; width:50%"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
add a comment |
0
Create parent div block add width and margin to it
<div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
<form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass
Edit =>
<div style="margin: 0 auto;"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
You can also do
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div style="float:right; width:50%"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
add a comment |
0
<form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass
Edit =>
<div style="margin: 0 auto;"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
You can also do
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div style="float:right; width:50%"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
add a comment |
0
0
0
<form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass
Edit =>
<div style="margin: 0 auto;"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
You can also do
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div style="float:right; width:50%"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
<form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass
Edit =>
<div style="margin: 0 auto;"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
You can also do
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div style="float:right; width:50%"> <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form></div>
</div>
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
edited Jan 1 at 13:35
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
answered Jan 1 at 12:57
Djenci DuqueneDjenci Duquene
264
264
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
add a comment |
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. Screenshot Also, what should the "mycenterformclass" contain?
– tujemacic
Jan 1 at 13:06
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Then create a div around the form and give that div the style margin: 0 auto
– Djenci Duquene
Jan 1 at 13:22
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
Thank you so much! Finally works now! :)
– tujemacic
Jan 1 at 13:40
add a comment |
0
Create parent div block add width and margin to it
<div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
add a comment |
0
Create parent div block add width and margin to it
<div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
add a comment |
0
0
0
Create parent div block add width and margin to it
<div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
Create parent div block add width and margin to it
<div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div><div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div><div style="margin:0 auto; width:1000px;">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
answered Jan 1 at 13:36
Jagannath KinikarJagannath Kinikar
11
11
add a comment |
add a comment |
