Create bootstrap form with multiple inline lables and selectsWhat's the proper value for a checked attribute of an HTML checkbox?Twitter Bootstrap Form File Element Upload ButtonInput widths on Bootstrap 3bootstrap grid - form-control takes full width of parent div, how to insert something next to it?Select drop down does not work in mobile device when apply bootstrapHow can I make a Twitter Bootstrap styled form have multiple inputs in a row?Cannot display HTML stringWhy does input tags have more space between them than select tags while using twitter bootstrap form classes?Create a form using Bootstrap 4 that looks like the forms in Bootstrap 3Emmet wrap with abbreviation

Why should care be taken while closing a capacitive circuit?

Control GPIO pins from C

Are unaudited server logs admissible in a court of law?

Is there such a thing as too inconvenient?

Can I check a small array of bools in one go?

Same SObject Upsert Parent Lookup record using an external Id

Inset Square From a Rectangular Face

Would it be illegal for Facebook to actively promote a political agenda?

How do you call it when two celestial bodies come as close to each other as they will in their current orbits?

awkward stretchy fingering

How best to join tables, which have different lengths on the same column values which exist in both tables?

Are there categories whose internal hom is somewhat 'exotic'?

Check disk usage of files returned with spaces

Output with the same length always

Is recepted a word?

iPad or iPhone doesn't charge until unlocked?

Do predators tend to have vertical slit pupils versus horizontal for prey animals?

Why doesn't mathematics collapse down, even though humans quite often make mistakes in their proofs?

Show two plots together: a two dimensional curve tangent to the maxima of a three dimensional plot

What happened after the end of the Truman Show?

Designing a prison for a telekinetic race

What can I do to keep a threaded bolt from falling out of it’s slot

Did Wernher von Braun really have a "Saturn V painted as the V2"?

My new Acer Aspire 7 doesn't have a Legacy Boot option, what can I do to get it?



Create bootstrap form with multiple inline lables and selects


What's the proper value for a checked attribute of an HTML checkbox?Twitter Bootstrap Form File Element Upload ButtonInput widths on Bootstrap 3bootstrap grid - form-control takes full width of parent div, how to insert something next to it?Select drop down does not work in mobile device when apply bootstrapHow can I make a Twitter Bootstrap styled form have multiple inputs in a row?Cannot display HTML stringWhy does input tags have more space between them than select tags while using twitter bootstrap form classes?Create a form using Bootstrap 4 that looks like the forms in Bootstrap 3Emmet wrap with abbreviation






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















Office hours form



I'm trying to create a form in bootstrap 4 which looks similar to the image above.



I have tried numerous layouts and played around with the grid system to get the same effect, if I use the grid system to align all elements it looks fine on desktop, but is broken on mobile.



<div class="form-row"> 
 <div class="form-group col-md-2">
 <label id="monday">Monday</label>
 </div>
 <div class="form-group col-md-1">
 <label id="mon-from">From</label>
 </div>
 <div class="form-group col-md-2"> 
 <select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
 <option value="00">00</option>
 <option value="01">01</option>
 <option value="02">02</option>
 <option value="03">03</option>
 <option value="04">04</option>
 <option value="05">05</option>
 <option value="06">06</option>
 <option value="07">07</option>
 <option value="08" selected>08</option>
 <option value="09">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option> 
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 </select>
 <label id="mon-semi-from">:</label>
 <select class="form-control-sm" id="mon-from-min" name="mon-from-min">
 <option value="00" selected>00</option>
 <option value="01">01</option>
 <option value="02">02</option>
 <option value="03">03</option>
 <option value="04">04</option>
 <option value="05">05</option>
 <option value="06">06</option>
 <option value="07">07</option>
 <option value="08">08</option>
 <option value="09">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option> 
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
 <option value="32">32</option>
 <option value="33">33</option>
 <option value="34">34</option>
 <option value="35">35</option> 
 <option value="36">36</option>
 <option value="37">37</option>
 <option value="38">38</option>
 <option value="39">39</option>
 <option value="40">40</option>
 <option value="41">41</option>
 <option value="42">42</option>
 <option value="43">43</option>
 <option value="44">44</option>
 <option value="45">45</option>
 <option value="46">46</option>
 <option value="47">47</option>
 <option value="49">49</option>
 <option value="50">50</option>
 <option value="51">51</option> 
 <option value="52">52</option>
 <option value="53">53</option>
 <option value="54">54</option>
 <option value="55">55</option>
 <option value="56">56</option>
 <option value="57">57</option>
 <option value="58">58</option>
 <option value="59">59</option>
 </select>
 </div>
 <div class="form-group col-md-1">
 <label id="mon-to">To</label>
 </div>
 <div class="form-group col-md-2">
 <select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
 <option value="00">00</option>
 <option value="01">01</option>
 <option value="02">02</option>
 <option value="03">03</option>
 <option value="04">04</option>
 <option value="05">05</option>
 <option value="06">06</option>
 <option value="07">07</option>
 <option value="08">08</option>
 <option value="09">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option> 
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17" selected>17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 </select>
 <label id="mon-semi-to">:</label>
 <select class="form-control-sm" id="mon-to-min" name="mon-to-min">
 <option value="00" selected>00</option>
 <option value="01">01</option>
 <option value="02">02</option>
 <option value="03">03</option>
 <option value="04">04</option>
 <option value="05">05</option>
 <option value="06">06</option>
 <option value="07">07</option>
 <option value="08">08</option>
 <option value="09">09</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option> 
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
 <option value="32">32</option>
 <option value="33">33</option>
 <option value="34">34</option>
 <option value="35">35</option> 
 <option value="36">36</option>
 <option value="37">37</option>
 <option value="38">38</option>
 <option value="39">39</option>
 <option value="40">40</option>
 <option value="41">41</option>
 <option value="42">42</option>
 <option value="43">43</option>
 <option value="44">44</option>
 <option value="45">45</option>
 <option value="46">46</option>
 <option value="47">47</option>
 <option value="49">49</option>
 <option value="50">50</option>
 <option value="51">51</option> 
 <option value="52">52</option>
 <option value="53">53</option>
 <option value="54">54</option>
 <option value="55">55</option>
 <option value="56">56</option>
 <option value="57">57</option>
 <option value="58">58</option>
 <option value="59">59</option>
 </select>
 </div>
 <div class="form-group col-md-2">
 <div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
 <input type="checkbox" class="custom-control-input" id="closedMon">
 <label class="custom-control-label" for="closedMon">Closed</label> 
 </div>
 <label id="mon24Text" hidden></label>
 </div>
 <div class="form-group col-md-2">
 <a href="javascript: specialMon();" id="specialHrsMon">Add special hours</a>
 </div>
 </div>


This works fine on desktop and laptop screens, but is totally broken on mobile, with the select elements cut off.



Can someone please show me in the correct direction.






html css html5 bootstrap-4







share|improve this question






























    0















    Office hours form



    I'm trying to create a form in bootstrap 4 which looks similar to the image above.



    I have tried numerous layouts and played around with the grid system to get the same effect, if I use the grid system to align all elements it looks fine on desktop, but is broken on mobile.



    <div class="form-row"> 
     <div class="form-group col-md-2">
     <label id="monday">Monday</label>
     </div>
     <div class="form-group col-md-1">
     <label id="mon-from">From</label>
     </div>
     <div class="form-group col-md-2"> 
     <select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
     <option value="00">00</option>
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="05">05</option>
     <option value="06">06</option>
     <option value="07">07</option>
     <option value="08" selected>08</option>
     <option value="09">09</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option> 
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     </select>
     <label id="mon-semi-from">:</label>
     <select class="form-control-sm" id="mon-from-min" name="mon-from-min">
     <option value="00" selected>00</option>
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="05">05</option>
     <option value="06">06</option>
     <option value="07">07</option>
     <option value="08">08</option>
     <option value="09">09</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option> 
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     <option value="24">24</option>
     <option value="25">25</option>
     <option value="26">26</option>
     <option value="27">27</option>
     <option value="28">28</option>
     <option value="29">29</option>
     <option value="30">30</option>
     <option value="31">31</option>
     <option value="32">32</option>
     <option value="33">33</option>
     <option value="34">34</option>
     <option value="35">35</option> 
     <option value="36">36</option>
     <option value="37">37</option>
     <option value="38">38</option>
     <option value="39">39</option>
     <option value="40">40</option>
     <option value="41">41</option>
     <option value="42">42</option>
     <option value="43">43</option>
     <option value="44">44</option>
     <option value="45">45</option>
     <option value="46">46</option>
     <option value="47">47</option>
     <option value="49">49</option>
     <option value="50">50</option>
     <option value="51">51</option> 
     <option value="52">52</option>
     <option value="53">53</option>
     <option value="54">54</option>
     <option value="55">55</option>
     <option value="56">56</option>
     <option value="57">57</option>
     <option value="58">58</option>
     <option value="59">59</option>
     </select>
     </div>
     <div class="form-group col-md-1">
     <label id="mon-to">To</label>
     </div>
     <div class="form-group col-md-2">
     <select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
     <option value="00">00</option>
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="05">05</option>
     <option value="06">06</option>
     <option value="07">07</option>
     <option value="08">08</option>
     <option value="09">09</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option> 
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17" selected>17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     </select>
     <label id="mon-semi-to">:</label>
     <select class="form-control-sm" id="mon-to-min" name="mon-to-min">
     <option value="00" selected>00</option>
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="05">05</option>
     <option value="06">06</option>
     <option value="07">07</option>
     <option value="08">08</option>
     <option value="09">09</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option> 
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     <option value="24">24</option>
     <option value="25">25</option>
     <option value="26">26</option>
     <option value="27">27</option>
     <option value="28">28</option>
     <option value="29">29</option>
     <option value="30">30</option>
     <option value="31">31</option>
     <option value="32">32</option>
     <option value="33">33</option>
     <option value="34">34</option>
     <option value="35">35</option> 
     <option value="36">36</option>
     <option value="37">37</option>
     <option value="38">38</option>
     <option value="39">39</option>
     <option value="40">40</option>
     <option value="41">41</option>
     <option value="42">42</option>
     <option value="43">43</option>
     <option value="44">44</option>
     <option value="45">45</option>
     <option value="46">46</option>
     <option value="47">47</option>
     <option value="49">49</option>
     <option value="50">50</option>
     <option value="51">51</option> 
     <option value="52">52</option>
     <option value="53">53</option>
     <option value="54">54</option>
     <option value="55">55</option>
     <option value="56">56</option>
     <option value="57">57</option>
     <option value="58">58</option>
     <option value="59">59</option>
     </select>
     </div>
     <div class="form-group col-md-2">
     <div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
     <input type="checkbox" class="custom-control-input" id="closedMon">
     <label class="custom-control-label" for="closedMon">Closed</label> 
     </div>
     <label id="mon24Text" hidden></label>
     </div>
     <div class="form-group col-md-2">
     <a href="javascript: specialMon();" id="specialHrsMon">Add special hours</a>
     </div>
     </div>


    This works fine on desktop and laptop screens, but is totally broken on mobile, with the select elements cut off.



    Can someone please show me in the correct direction.






    html css html5 bootstrap-4







    share|improve this question


























      0












      0








      0








      Office hours form



      I'm trying to create a form in bootstrap 4 which looks similar to the image above.



      I have tried numerous layouts and played around with the grid system to get the same effect, if I use the grid system to align all elements it looks fine on desktop, but is broken on mobile.



      <div class="form-row"> 
       <div class="form-group col-md-2">
       <label id="monday">Monday</label>
       </div>
       <div class="form-group col-md-1">
       <label id="mon-from">From</label>
       </div>
       <div class="form-group col-md-2"> 
       <select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
       <option value="00">00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08" selected>08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       </select>
       <label id="mon-semi-from">:</label>
       <select class="form-control-sm" id="mon-from-min" name="mon-from-min">
       <option value="00" selected>00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
       <option value="32">32</option>
       <option value="33">33</option>
       <option value="34">34</option>
       <option value="35">35</option> 
       <option value="36">36</option>
       <option value="37">37</option>
       <option value="38">38</option>
       <option value="39">39</option>
       <option value="40">40</option>
       <option value="41">41</option>
       <option value="42">42</option>
       <option value="43">43</option>
       <option value="44">44</option>
       <option value="45">45</option>
       <option value="46">46</option>
       <option value="47">47</option>
       <option value="49">49</option>
       <option value="50">50</option>
       <option value="51">51</option> 
       <option value="52">52</option>
       <option value="53">53</option>
       <option value="54">54</option>
       <option value="55">55</option>
       <option value="56">56</option>
       <option value="57">57</option>
       <option value="58">58</option>
       <option value="59">59</option>
       </select>
       </div>
       <div class="form-group col-md-1">
       <label id="mon-to">To</label>
       </div>
       <div class="form-group col-md-2">
       <select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
       <option value="00">00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17" selected>17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       </select>
       <label id="mon-semi-to">:</label>
       <select class="form-control-sm" id="mon-to-min" name="mon-to-min">
       <option value="00" selected>00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
       <option value="32">32</option>
       <option value="33">33</option>
       <option value="34">34</option>
       <option value="35">35</option> 
       <option value="36">36</option>
       <option value="37">37</option>
       <option value="38">38</option>
       <option value="39">39</option>
       <option value="40">40</option>
       <option value="41">41</option>
       <option value="42">42</option>
       <option value="43">43</option>
       <option value="44">44</option>
       <option value="45">45</option>
       <option value="46">46</option>
       <option value="47">47</option>
       <option value="49">49</option>
       <option value="50">50</option>
       <option value="51">51</option> 
       <option value="52">52</option>
       <option value="53">53</option>
       <option value="54">54</option>
       <option value="55">55</option>
       <option value="56">56</option>
       <option value="57">57</option>
       <option value="58">58</option>
       <option value="59">59</option>
       </select>
       </div>
       <div class="form-group col-md-2">
       <div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
       <input type="checkbox" class="custom-control-input" id="closedMon">
       <label class="custom-control-label" for="closedMon">Closed</label> 
       </div>
       <label id="mon24Text" hidden></label>
       </div>
       <div class="form-group col-md-2">
       <a href="javascript: specialMon();" id="specialHrsMon">Add special hours</a>
       </div>
       </div>


      This works fine on desktop and laptop screens, but is totally broken on mobile, with the select elements cut off.



      Can someone please show me in the correct direction.






      html css html5 bootstrap-4







      share|improve this question














      Office hours form



      I'm trying to create a form in bootstrap 4 which looks similar to the image above.



      I have tried numerous layouts and played around with the grid system to get the same effect, if I use the grid system to align all elements it looks fine on desktop, but is broken on mobile.



      <div class="form-row"> 
       <div class="form-group col-md-2">
       <label id="monday">Monday</label>
       </div>
       <div class="form-group col-md-1">
       <label id="mon-from">From</label>
       </div>
       <div class="form-group col-md-2"> 
       <select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
       <option value="00">00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08" selected>08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       </select>
       <label id="mon-semi-from">:</label>
       <select class="form-control-sm" id="mon-from-min" name="mon-from-min">
       <option value="00" selected>00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
       <option value="32">32</option>
       <option value="33">33</option>
       <option value="34">34</option>
       <option value="35">35</option> 
       <option value="36">36</option>
       <option value="37">37</option>
       <option value="38">38</option>
       <option value="39">39</option>
       <option value="40">40</option>
       <option value="41">41</option>
       <option value="42">42</option>
       <option value="43">43</option>
       <option value="44">44</option>
       <option value="45">45</option>
       <option value="46">46</option>
       <option value="47">47</option>
       <option value="49">49</option>
       <option value="50">50</option>
       <option value="51">51</option> 
       <option value="52">52</option>
       <option value="53">53</option>
       <option value="54">54</option>
       <option value="55">55</option>
       <option value="56">56</option>
       <option value="57">57</option>
       <option value="58">58</option>
       <option value="59">59</option>
       </select>
       </div>
       <div class="form-group col-md-1">
       <label id="mon-to">To</label>
       </div>
       <div class="form-group col-md-2">
       <select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
       <option value="00">00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17" selected>17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       </select>
       <label id="mon-semi-to">:</label>
       <select class="form-control-sm" id="mon-to-min" name="mon-to-min">
       <option value="00" selected>00</option>
       <option value="01">01</option>
       <option value="02">02</option>
       <option value="03">03</option>
       <option value="04">04</option>
       <option value="05">05</option>
       <option value="06">06</option>
       <option value="07">07</option>
       <option value="08">08</option>
       <option value="09">09</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option> 
       <option value="13">13</option>
       <option value="14">14</option>
       <option value="15">15</option>
       <option value="16">16</option>
       <option value="17">17</option>
       <option value="18">18</option>
       <option value="19">19</option>
       <option value="20">20</option>
       <option value="21">21</option>
       <option value="22">22</option>
       <option value="23">23</option>
       <option value="24">24</option>
       <option value="25">25</option>
       <option value="26">26</option>
       <option value="27">27</option>
       <option value="28">28</option>
       <option value="29">29</option>
       <option value="30">30</option>
       <option value="31">31</option>
       <option value="32">32</option>
       <option value="33">33</option>
       <option value="34">34</option>
       <option value="35">35</option> 
       <option value="36">36</option>
       <option value="37">37</option>
       <option value="38">38</option>
       <option value="39">39</option>
       <option value="40">40</option>
       <option value="41">41</option>
       <option value="42">42</option>
       <option value="43">43</option>
       <option value="44">44</option>
       <option value="45">45</option>
       <option value="46">46</option>
       <option value="47">47</option>
       <option value="49">49</option>
       <option value="50">50</option>
       <option value="51">51</option> 
       <option value="52">52</option>
       <option value="53">53</option>
       <option value="54">54</option>
       <option value="55">55</option>
       <option value="56">56</option>
       <option value="57">57</option>
       <option value="58">58</option>
       <option value="59">59</option>
       </select>
       </div>
       <div class="form-group col-md-2">
       <div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
       <input type="checkbox" class="custom-control-input" id="closedMon">
       <label class="custom-control-label" for="closedMon">Closed</label> 
       </div>
       <label id="mon24Text" hidden></label>
       </div>
       <div class="form-group col-md-2">
       <a href="javascript: specialMon();" id="specialHrsMon">Add special hours</a>
       </div>
       </div>


      This works fine on desktop and laptop screens, but is totally broken on mobile, with the select elements cut off.



      Can someone please show me in the correct direction.






      html css html5 bootstrap-4




      html css html5 bootstrap-4






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 27 at 14:06









      QuintinQuintin

      416 bronze badges




      416 bronze badges

























          1 Answer
          1






          active

          oldest

          votes


















          0














          use media queries to style the mobile view.
          for eg:



          @media(min-width:320px)and(max-width:768px)
          .form-group
          width:100%;
          display:block;




          manually customise like this.






          share|improve this answer
























            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


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55379223%2fcreate-bootstrap-form-with-multiple-inline-lables-and-selects%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            use media queries to style the mobile view.
            for eg:



            @media(min-width:320px)and(max-width:768px)
            .form-group
            width:100%;
            display:block;




            manually customise like this.






            share|improve this answer





























              0














              use media queries to style the mobile view.
              for eg:



              @media(min-width:320px)and(max-width:768px)
              .form-group
              width:100%;
              display:block;




              manually customise like this.






              share|improve this answer



























                0












                0








                0







                use media queries to style the mobile view.
                for eg:



                @media(min-width:320px)and(max-width:768px)
                .form-group
                width:100%;
                display:block;




                manually customise like this.






                share|improve this answer













                use media queries to style the mobile view.
                for eg:



                @media(min-width:320px)and(max-width:768px)
                .form-group
                width:100%;
                display:block;




                manually customise like this.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 27 at 14:13









                MuraleekrishnanMuraleekrishnan

                11 bronze badge




                11 bronze badge





















                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.







                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.



















                    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














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55379223%2fcreate-bootstrap-form-with-multiple-inline-lables-and-selects%23new-answer', 'question_page');

                    );

                    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







                    -

                    Popular posts from this blog

                    Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

                    Image
                    Pages using ISBN magic linksMbegu za lughaKamusiIsimu nenoKiarabukitabulughaKiswahilialfabetimaanaufafanuzimanenomuhtasarisarufividahizoalfabeti Kamusi Kutoka Wikipedia, kamusi elezo huru Jump to navigation Jump to search Kamusi za Kiswahili Kamusi ya Kiswahili-Kiswahili (kamusi wahidiya) Kamusi ya Kiswahili - Kiingereza (kamusi thania) Kamusi (kutoka neno la Kiarabu قاموس qamus ) ni kitabu ambacho kinaorodhesha maneno ya lugha yaliyokusanywa kutoka kwa watumiaji wa lugha fulani, kwa mfano lugha ya Kiswahili. Maneno hupangwa kwa mtindo wa alfabeti, hutoa maana, asili na ufafanuzi wa utumizi wa maneno na jinsi yanavyotumika au yanavyotamkwa. [1] Yaliyomo 1 Aina za kamusi 2 Muundo wa kamusi 2.1 1. Utangulizi wa kamusi 2.2 2. Matini ya kamusi 2.3 3. Sherehe ya kamusi 3 Faida za kamusi 4 Dhima ya picha katika kamusi 5 Marejeo 6 Tazama pia 7 Viungo vya nje Aina za kamusi | Kuna aina mbalimbali za kamusi ambazo ni: Kamusi wahidiya yaani ya l
                    Read more

                    Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

                    Image
                    Strange use of "whether ... than ..." in official text Could a dragon use its wings to swim? Car headlights in a world without electricity How to avoid supervisors with prejudiced views? Is the offspring between a demon and a celestial possible? If so what is it called and is it in a book somewhere? Can I board the first leg of the flight without having final country's PR card? subequations: How to continue numbering within subequation? How do you define an element with an ID attribute using LWC? Relevant Part for a Badminton Serve What CSS properties can the br tag have? What are the unusually-enlarged wing sections on this P-38 Lightning? Why did early computer designers eschew integers? Is it a bad idea to plug the other end of ESD strap to wall ground? Magento 1.9 observer on only new product added ( no updated product ) Airplane gently rocking its wings during whole flight It is correct to match light sources with the same color temperat
                    Read more

                    Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript

                    Image
                    What steps should I take to lawfully visit the United States as a tourist immediately after visiting on a B-1 visa? Would dual wielding daggers be a viable choice for a covert bodyguard? For a hashing function like MD5, how similar can two plaintext strings be and still generate the same hash? Using Newton's shell theorem to accelerate a spaceship Why doesn't sea level show seasonality? What prevents someone from claiming to be the murderer in order to get the real murderer off? Has anyone in space seen or photographed a simple laser pointer from Earth? What does (void *)1 mean Why does the U.S. tolerate foreign influence from Saudi Arabia and Israel on its domestic policies while not tolerating that from China or Russia? Modulus Operandi What's the point of having a RAID 1 configuration over incremental backups to a secondary drive? How to ask for a LinkedIn endorsement? Good resources for solving techniques (Metaheuristics, MILP, CP etc) How woul
                    Read more