I have added a search box web part in a custom page layout in SharePoint online, I am using bootstrap

I am trying to make the width of the search box smaller using css but whenever I do the results are not what I am hoping for. Here is the search box on the right

enter image description here

Any type of styling the width seems to bring the icon down and search box stays the same width as you can see in the next image. enter image description here

This is my HTML

<!-- Start Section 1 -->
<div class="section">
<div class="container">
<!-- 2 column Web Part zones -->
<div class="row">
<div class="col-md-6">
<WebPartPages:WebPartZone runat="server" Title="Stories" ID="TopLeft
<ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>  </div>
<div id="people-finder-container" class="col-md-6">
<WebPartPages:WebPartZone runat="server" Title="PeopleFinder" ID="TopRight
<ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>  </div>
<!-- /.row -->
<!-- /.container -->
<!-- End Section 1 -->

The css i have tried is pretty straightforward


When that didnt work I tired to access the web part directly using using the web part ID


Still it gave me the same result. Any help in solving this would be much appreciated


EDIT: Added content when inspecting search box element -

        <div id="people-finder-container" class="col-md-6">
        <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartWPQ5" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
        <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
        <div webpartid="552f3049-1974-4968-a9b9-0a02385fdbba" haspers="false" id="WebPartWPQ5" width="100%" class="ms-WPBody noindex " allowdelete="false" style=""><div style="display: none;"></div>
        <div componentid="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr">
        <div id="SearchBox" name="Control" class="ms-floatLeft">
        <div class="ms-srch-sbLarge ms-srch-sb-border" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sboxdiv">
        <input type="text" value="" maxlength="2048" accesskey="S" title="Search..." id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) { $getClientControl(this).search(this.value);return Srch.U.cancelEvent(event); }" onkeydown="var ctl = $getClientControl(this);ctl.activateDefaultQuerySuggestionBehavior();" onfocus="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(true);" onblur="var ctl = $getClientControl(this);ctl.showPrompt();ctl.setBorder(false);" class="ms-textLarge ms-srch-sbLarge-fullWidth ms-srch-sb-prompt ms-helperText">
        <a title="Search" class="ms-srch-sb-searchLink" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_SearchLink" onclick="$getClientControl(this).search($get('ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sbox').value);" href="javascript: {}">                  <img src="/_layouts/15/images/searchresultui.png?rev=41" class="ms-srch-sbLarge-searchImg" id="searchImg" alt="Search">                </a>
        <div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">                    <div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_AutoCompList">
        <div id="SearchOptions">        </div>
        </div><noscript>&lt;div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_noscript"&gt;It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.&lt;/div&gt;</noscript>
        <div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba">
        </div><div class="ms-clear"></div></div>
  • Could you paste the content after you inspect the Search box using browser?
    – 404
    Oct 30, 2015 at 11:17
  • No problem I'll add it to the question
    – Jamie_lee
    Oct 30, 2015 at 11:24
  • Try selecting the webpart container div with "#people-finder-container [webpartid]" (which will select any webpart inside that div, you can give it a specific webpartid GUID value to narrow things down some more if needed), would also be worth a shot to try setting max-width
    – John-M
    Oct 30, 2015 at 12:52
  • It works for me if I apply the width on #SearchBox. I checked styling the main search box btw.
    – Akhoy
    Oct 30, 2015 at 13:12
  • Thanks for all your replies, they helped me solve the issue.
    – Jamie_lee
    Oct 30, 2015 at 14:44

1 Answer 1


Finally resolved it. Looks like it was the inner part of the search box not resizing -

enter image description here

this was the code I used


I didn't expect this to work or if it is even best practice but it is

  • A. working
  • B. working with bootstrap just fine.

Thanks for everyone's comments they got me thinking and I was able to find the solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.