How to keep all bootstrap columns in the same row with meta tag viewport in mobile view?

I'm working on a to-do list web application, I have an input field and a submit button in the same row in two columns. I have added the meta tag viewport to make it mobile friendly but it renders each of them in a row. I want to make the input field and the submit button on the same row in mobile view so what do i need to do?

I have tried to wrap with the form-inline class but still breaks into two rows in mobile view

Here's the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and here's the my input and submit button tags:

<div class="row" id="myForm">
    <div class=" col-sm-11">
            <input class="form-control" id ="toDoListInput" placeholder="What needs to be done?" formControlName="toDoListInput" type="text">
    </div>
    <div class="col-sm-1" >
            <input class="btn btn-light" type="submit" name="Add" onclick="appendToList()">
    </div>
</div>

Solution

The way your code is written right now the columns will each automatically collapse to the equivalent of col-xs-12, because your highest specified media breakpoint for anything else is col-sm-*.

You had mentioned the col-xs-* breakpoint not suiting every potential mobile size, resulting in horizontal scrolling. One way to avoid that potential hiccup is to reconsider how you are displaying your <input> and button elements. Bootstrap has a great UI component for this: .input-group

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" id="myForm">
    <div class="col-xs-12">
    	<div class="input-group">
        <input class="form-control" id="toDoListInput" placeholder="What needs to be done?" formControlName="toDoListInput" type="text">
        <div class="input-group-btn">
          <button class="btn btn-light" role="button" type="submit" onclick="appendToList()">Add</button>
        </div>
      </div>
    </div>
  </div>
</div>

The combination of .input-group with .input-group-btn causes your form input and button to align together, and the .form-control class will scale down (or up) as needed depending on the width of the viewport.