Bootstrap 4 - widening a navbar's inline form input
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a search input with the following (mostly standard) code:
<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">
<!-- links -->
<form class="form-inline my-2 my-lg-0" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
I'd like the input to be wider, but I'm not sure how to do it. I've tried giving my input-group div a row class, with the input itself having a col-3 class, but that actually shrinks the input with rather than widen it. I'm not sure what else to try.
html css bootstrap-4
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
add a comment |
I have a search input with the following (mostly standard) code:
<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">
<!-- links -->
<form class="form-inline my-2 my-lg-0" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
I'd like the input to be wider, but I'm not sure how to do it. I've tried giving my input-group div a row class, with the input itself having a col-3 class, but that actually shrinks the input with rather than widen it. I'm not sure what else to try.
html css bootstrap-4
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19
add a comment |
I have a search input with the following (mostly standard) code:
<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">
<!-- links -->
<form class="form-inline my-2 my-lg-0" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
I'd like the input to be wider, but I'm not sure how to do it. I've tried giving my input-group div a row class, with the input itself having a col-3 class, but that actually shrinks the input with rather than widen it. I'm not sure what else to try.
html css bootstrap-4
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
I have a search input with the following (mostly standard) code:
<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">
<!-- links -->
<form class="form-inline my-2 my-lg-0" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
I'd like the input to be wider, but I'm not sure how to do it. I've tried giving my input-group div a row class, with the input itself having a col-3 class, but that actually shrinks the input with rather than widen it. I'm not sure what else to try.
html css bootstrap-4
html css bootstrap-4
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
asked Nov 24 '18 at 3:23
Major ProductionsMajor Productions
3,031956125
3,031956125
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19
add a comment |
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19
add a comment |
1 Answer
1
active
oldest
votes
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454902%2fbootstrap-4-widening-a-navbars-inline-form-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
add a comment |
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
add a comment |
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
Use the utility classes such as d-inline w-100 as needed. If you don't want the input to be full width, use w-50, w-75, etc...
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- links -->
<form class="mx-2 my-auto d-inline w-100" action="">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav>
Demo: https://www.codeply.com/go/SW2f1PJUA3
Also see: Bootstrap 4 — how to make 100% width of the search input in navbar?
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
answered Nov 24 '18 at 12:35
ZimZim
199k51422401
199k51422401
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454902%2fbootstrap-4-widening-a-navbars-inline-form-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
could you create a working code snipped of your code and add sample image with your expected result
– Nedko Dimitrov
Nov 24 '18 at 9:19