Responsive Form in Bootstrap - html

Question

I am learning Bootstrap and am trying to implement it within a Ruby on Rails projects I have. I am using the bootstrap navbar and am trying to integrate that with rails. I have a search bar that I am trying to make responsive. I want the width of the search form to fill up the available space, and shrink/grow as the screen size changes. The navbar in bootstrap already has a lot of CSS styles applied to it and I feel like trying to add a feature like this to an existing navbar is difficult.
Here is the code for my form...
application.html.erb
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #228822;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- overriding to HTTP GET because turbolinks causes issues with pagination infinite scroll -->
<%=link_to "The Pragmatic Bookshelf", store_index_path, :class => "navbar-brand", method: :get, style: "color:#bbffbb" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to t('.questions'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.news'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.contact'), store_index_path, style: "color:#bbffbb" %></li>
</ul>
<form class="navbar-form navbar-left">
<div id="search_bar" >
<%= form_tag(store_index_path, method: :get) do %>
<div class="search_bar_text">
<%= text_field_tag :search, '', id: 'search_bar_text' %>
</div>
<div class="search_bar_image">
<%= image_submit_tag 'search.png', id: 'search_bar_image'%>
</div>
<% end %>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu">
<% if session[:user_id] %>
<li><%= link_to "Orders", orders_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Products", products_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Users", users_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", logout_path, method: :delete%></li>
<% else %>
<li><%= link_to "Login", login_path%></li>
<% end %>
</ul>
</li>
<li class="dropdown">
Language <span class="caret"></span>
<ul class="dropdown-menu">
<% LANGUAGES.each do |language|%>
<li><%= link_to language[0].to_s, store_index_url(locale: language[1]) %></li>
<% end %>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I got most of this code from an example in the bootstrap documentation and have been implementing some erb into it to integrate it with my Rails project. The form class="navbar-form navbar-left" is where the search bar starts. The behavior I want is for this to fill up the remaining space between the unordered lists to the right and left and adjust its size based on the current screen size.
I have experimented with display flex and flex-grow, floating, & overflow. Cant seem to get anything working. I wont include my CSS file since its only some font/color changes, most of the CSS is from bootstrap anyways.
Any help/guidance is appreciated :)

Answer 1

I'll ask the dumb question... do you have the following in your < head > section?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
without it, Bootstrap won't be responsive.

Answer 2

Bootstrap includes a grid system. Maybe you can use this to define the width of the search field.
The grid system divides the width into 12 columns. So you could use for example:
.col-sm-12 .col-lg-4
You can play around with the values.