I am trying to set the search form with submit button in the Navbar as shown in the following image(Following image I have taken from the Bootstrap tutorial page).

enter image description here

  • Now, When we install the default Bootstrap theme from drupal.org it will be ended up like as shown in following image.

    enter image description here

    Now, if I simply move that block to the Navigation bar, it will end up as shown in following image, which is not a solution for this.

    enter image description here

    So, I dig out on the bootstrap tutorial page and found the following code.

    enter image description here

    So, I can paste that code in the page.tpl.php and can achieve as shown in following image, BUT it will not search anything, as it is just a plain HTML code.

    enter image description here

How can I achieve that? If CSS is the answer, for now I do not want to go with that. As IMHO, since this display of search form is described as a default on the bootstrap tutorial and in every theme demo display pages, So, there should be some way to enable that, or some way to place that.

Any suggestion or direction? Thanks.

  • how about creating your own search block with custom tpl with that markup? in button and textfield you can add attribute class, placeholder
    – iamroald
    Aug 21, 2016 at 6:13
  • @iamroald I am thinking in that direction also. I have just added the answer and what is the issue, if you can suggest to fine-tune. Thanks
    – CodeNext
    Aug 21, 2016 at 6:27

3 Answers 3


After some search I figure out the following solution, it is working, But the issue is it is applying to search_block_form also, might be function lsubtheme_bootstrap_search_form_wrapper($variables) is the reason, which is getting applied everywhere. Might be giving False positive result.

PLEASE anybody have any suggestion, how to imptove this, I am trying will update.

Codes in template.php

function lsubtheme_preprocess_page(&$variables){
  $search_form = drupal_get_form('search_form');
  $search_box = drupal_render($search_form);
  $variables['search_box'] = $search_box;

 *  Form alter to add missing bootstrap classes and role to search form.

function lsubtheme_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_form') {
    $form['#attributes']['class'][] = 'navbar-form navbar-left';
    $form['#attributes']['role'][] = 'search';

function lsubtheme_bootstrap_search_form_wrapper($variables) {

  $output = '<div class="form-group">';
  $output .= $variables['element']['#children'];
  $output .= ' <div class="form-group">';
  $output .= '<button type="submit" class="btn btn-default">Search</button>';
  $output .= '</div>';
  $output .= '</div>';
  return $output;

Code in page.tpl.php

 <?php print $search_box; ?>

enter image description here


You will basically have to re-implement the rendering yourself.

The best way to do this, to me, is to implement hook_theme, provide a function, template, and variables to pass on, and change (via hook_form_alter or your provider Form class if you have one, Drupal 8) the form rendering function to your new one.

This will result in a cleaner more manageable approach, as you can then drop the HTML from the Bootstrap docs into your designated template. Then, any time you want to render a basic search form to be the Bootstrap one, change the forms #theme to your function. Then you don't have to fool with a lot of spaghetti code.

I would not copy/paste HTML into page.tpl.php as that will have no effect at all.

I see where you are getting the above code from, but I personally would not store markup like that in template.php. Easy to miss, and hard to adjust. The goal for an override like this is to isolate the behavior and ensure that no other form later on is inadvertently altered.

I wish I had an example on hand, but I cannot find one at the moment.

  • I will surely follow your steps. It will be some hard for me as currently I can play with some code logics, but not all. But I will try to do that. If you get any example please post it, so I can have something to apply the logic. Could you please see the following mine answer, Are you talking THAT kind of thing?, where I tried to do something like this First, Applied preprocess so $search_box will be accessible in page Second applied the class and role for search_form. Third added HTML through hook. And then print the $search_box in page.tpl.php. Very thanks
    – CodeNext
    Aug 27, 2016 at 0:30

Why not solve this on the theme level? Add the following to your sub theme javascript file. See https://www.drupal.org/node/304255 for more info

jQuery('#search-block-form .input-group button.btn.btn-primary span')
  .removeClass('glyphicon glyphicon-search icon')

Or in a new javascript file like

jQuery(document).ready(function() {
    var $button = jQuery('#search-block-form .input-group button.btn.btn-primary span');
    .removeClass('glyphicon glyphicon-search icon');

Resulting in enter image description here I've tried other solutions in projects which never were more satisfying than this.

To test without sub theme I placed it in a module dummy hook_init().

 * Implements hook_init().
function dummy_init() {
    drupal_add_js('jQuery(document).ready(function () { jQuery("#search-block-form .input-group button.btn.btn-primary span").text("Submit").removeClass("glyphicon glyphicon-search icon") });', 'inline');
  • Hi, I did not get your answer, suppose if I have to make a module of this code, other-way I can simply put it in template.php and give the functionaname function myThemeName_init() {....code.....}. But this way I found two issues, (1) The code seems somewahat buggy, as it is behaving like one full string. (2) Suppose if the code is Ok, how it will show the Search form to nav-bar, would you like to explain more? btw, I have not downvoted. Thank for your try.
    – CodeNext
    Aug 30, 2016 at 18:02
  • I assumed you are working on a subtheme where you can add the javascript snippet to your javascript file Aug 31, 2016 at 9:47
  • I've updated the code and tested it on a sub theme. Works like a charm Sep 1, 2016 at 9:01
  • Hi, thanks for your answer, Appreciated. What your code is doing, it providing the text Submit and hiding the icon. And second part in your answer should be talk about the placing the Search form in the nav-bar or placing the $search_form in the page.tpl.php. That all thing my answer is also doing. The purpose of my question was not just adding the search form in nav-bar, that I can done just placing the block there and use some CSS, but to find out how to do this right way in Drupal bootstrap theme. Continue.......
    – CodeNext
    Sep 3, 2016 at 12:25
  • ....By saying this I mean, Bootstrap theme is the very well established theme and it has all sort of documentation, and if you see that part of mentioned bootstrap documentation in my question, it has well mentioned code for the search form. And that theme has the official documentation for that drupal theme at Drupal Bootstrap theme. So if I aggregate all these facts, Bootstrap is not the native Drupal theme, Bootstrap is the basic HTML/CSS/JS theme for all platforms, hence, it deal with pure HTML, CSS, JS...Continue..
    – CodeNext
    Sep 3, 2016 at 12:26

Your Answer

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

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