Search input with an icon Bootstrap 4 with rounded textboxSearch input with an icon Bootstrap 4How to add svg icon in rounded bootstrap 4 form input / button ?Five equal columns in twitter bootstrapHow can I get my Twitter Bootstrap buttons to right align?Change navbar color in Twitter BootstrapBootstrap NavBar with left, center or right aligned itemsWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?Bootstrap 4 - Glyphicons migration?Missing visible-** and hidden-** in Bootstrap v4Bootstrap 4 navbar items on right sideSearch input with an icon Bootstrap 4bootstrap 4 icon inside input not works
Have 1.5% of all nuclear reactors ever built melted down?
Why do Russians almost not use verbs of possession akin to "have"?
Why didn't Thanos use the Time Stone to stop the Avengers' plan?
Why did the person in charge of a principality not just declare themself king?
The art of clickbait captions
Should one buy new hardware after a system compromise?
Which European Languages are not Indo-European?
Why would Ryanair allow me to book this journey through a third party, but not through their own website?
Why did British Steel have to borrow 120 million pounds (from the government) to cover its ETS obligations?
What was the idiom for something that we take without a doubt?
Why did Jon Snow do this immoral act if he is so honorable?
Count rotary dial pulses in a phone number (including letters)
What happened to boiled-off gases from the storage tanks at Launch Complex 39?
Is it truly impossible to tell what a CPU is doing?
Is this statement about cut time correct?
Pirate democracy at its finest
What could a self-sustaining lunar colony slowly lose that would ultimately prove fatal?
Why isn't 'chemically-strengthened glass' made with potassium carbonate to begin with?
Dad jokes are fun
Popcorn is the only acceptable snack to consume while watching a movie
How to melt snow without fire or body heat?
Find the three digit Prime number P from the given unusual relationships
How did NASA Langley end up with the first 737?
Is it legal to have an abortion in another state or abroad?
Search input with an icon Bootstrap 4 with rounded textbox
Search input with an icon Bootstrap 4How to add svg icon in rounded bootstrap 4 form input / button ?Five equal columns in twitter bootstrapHow can I get my Twitter Bootstrap buttons to right align?Change navbar color in Twitter BootstrapBootstrap NavBar with left, center or right aligned itemsWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?Bootstrap 4 - Glyphicons migration?Missing visible-** and hidden-** in Bootstrap v4Bootstrap 4 navbar items on right sideSearch input with an icon Bootstrap 4bootstrap 4 icon inside input not works
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I want rounded border search box with search icon.
Below code works but if I class "rounded-pill" then icon separates from textbox.
How can I make textbox round while icon also remains within.
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 24 at 2:11
KhalilKhalil
4632920
add a comment |
1
I want rounded border search box with search icon.
Below code works but if I class "rounded-pill" then icon separates from textbox.
How can I make textbox round while icon also remains within.
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 24 at 2:11
KhalilKhalil
4632920
add a comment |
1
1
1
I want rounded border search box with search icon.
Below code works but if I class "rounded-pill" then icon separates from textbox.
How can I make textbox round while icon also remains within.
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>bootstrap-4
asked Mar 24 at 2:11
KhalilKhalil
4632920
I want rounded border search box with search icon.
Below code works but if I class "rounded-pill" then icon separates from textbox.
How can I make textbox round while icon also remains within.
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div><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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div><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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control rounded-pill py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>bootstrap-4
bootstrap-4
asked Mar 24 at 2:11
KhalilKhalil
4632920
asked Mar 24 at 2:11
KhalilKhalil
4632920
asked Mar 24 at 2:11
KhalilKhalil
4632920
asked Mar 24 at 2:11
KhalilKhalil
4632920
asked Mar 24 at 2:11
KhalilKhalil
4632920
4632920
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Here's a Bootstrap only solution...
Use the negative margin utils to slide the button to the left:
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
This also works using input-group-text, or using the grid col-auto method explained in my other answer:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP
answered Mar 24 at 6:51
ZimZim
205k51431408
add a comment |
1
I'm not 100% sure, but accordingly to my research Bootstrap 4.3.1 (last version today) do not allow to get what you want with only pre-defined classes of Bootstrap.
Here is a sample with some CSS classes that you can include into your code, and will allows you to get the desired result. Review the Snippet!
/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
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
);
);
draft saved
draft discarded
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%2f55320141%2fsearch-input-with-an-icon-bootstrap-4-with-rounded-textbox%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Here's a Bootstrap only solution...
Use the negative margin utils to slide the button to the left:
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
This also works using input-group-text, or using the grid col-auto method explained in my other answer:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP
answered Mar 24 at 6:51
ZimZim
205k51431408
add a comment |
1
Here's a Bootstrap only solution...
Use the negative margin utils to slide the button to the left:
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
This also works using input-group-text, or using the grid col-auto method explained in my other answer:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP
answered Mar 24 at 6:51
ZimZim
205k51431408
add a comment |
1
1
1
Here's a Bootstrap only solution...
Use the negative margin utils to slide the button to the left:
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
This also works using input-group-text, or using the grid col-auto method explained in my other answer:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP
answered Mar 24 at 6:51
ZimZim
205k51431408
Here's a Bootstrap only solution...
Use the negative margin utils to slide the button to the left:
<div class="input-group">
<input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
<span class="input-group-append">
<button class="btn rounded-pill border-0 ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
This also works using input-group-text, or using the grid col-auto method explained in my other answer:
<div class="row no-gutters mt-3 align-items-center">
<div class="col-4">
<input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
</div>
<div class="col-auto">
<button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
https://www.codeply.com/go/cDQQcNY8kP
answered Mar 24 at 6:51
ZimZim
205k51431408
answered Mar 24 at 6:51
ZimZim
205k51431408
answered Mar 24 at 6:51
ZimZim
205k51431408
answered Mar 24 at 6:51
ZimZim
205k51431408
205k51431408
add a comment |
add a comment |
1
I'm not 100% sure, but accordingly to my research Bootstrap 4.3.1 (last version today) do not allow to get what you want with only pre-defined classes of Bootstrap.
Here is a sample with some CSS classes that you can include into your code, and will allows you to get the desired result. Review the Snippet!
/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
add a comment |
1
I'm not 100% sure, but accordingly to my research Bootstrap 4.3.1 (last version today) do not allow to get what you want with only pre-defined classes of Bootstrap.
Here is a sample with some CSS classes that you can include into your code, and will allows you to get the desired result. Review the Snippet!
/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
add a comment |
1
1
1
I'm not 100% sure, but accordingly to my research Bootstrap 4.3.1 (last version today) do not allow to get what you want with only pre-defined classes of Bootstrap.
Here is a sample with some CSS classes that you can include into your code, and will allows you to get the desired result. Review the Snippet!
/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
I'm not 100% sure, but accordingly to my research Bootstrap 4.3.1 (last version today) do not allow to get what you want with only pre-defined classes of Bootstrap.
Here is a sample with some CSS classes that you can include into your code, and will allows you to get the desired result. Review the Snippet!
/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>/* Rounded pill classes for horizontal sides */
.rounded-pill-left
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
.rounded-pill-right
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
/* Another classes to use */
.rounded-t-l-0
border-top-left-radius: 0 !important;
.rounded-t-r-0
border-top-right-radius: 0 !important;
.rounded-b-l-0
border-bottom-left-radius: 0 !important;
.rounded-b-r-0
border-bottom-right-radius: 0 !important;
.rounded-x-l-0
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
.rounded-x-r-0
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-5">
<div class="input-group">
<input class="form-control border rounded-pill-left border-right-0" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border rounded-pill-right border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
answered Mar 24 at 4:26
Yulio Aleman JimenezYulio Aleman Jimenez
1,018825
1,018825
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
add a comment |
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
I will mark this as answer if someone else does not provide bootstrap only solution.
– Khalil
Mar 24 at 4:56
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
Ok, thanks. I hope someone bring the ideal solution to the community!
– Yulio Aleman Jimenez
Mar 24 at 5:03
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f55320141%2fsearch-input-with-an-icon-bootstrap-4-with-rounded-textbox%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
