How to put my dropdown select on the same line with my text using bootstrap 5?

user_17020713 0
Viewed 332

How to put my dropdown select on the same line with my text? I want my drop down to be on the same line and make it shorter.

<div class="row mt-4 ">
   <p>1. Allowance For Yourself: Select 1 for yourself&nbsp;&nbsp;</p>
   <div class="container">
      <select class="form-select" name="selT1">
         <option value="0" selected>0</option>
         <%for x=1 to 1
             if strT1=cstr(x) then%>
                <option value="<%=x%>" selected>&nbsp;<%=x%>&nbsp;</option>
             <%else%>                                            
                <option value="<%=x%>">&nbsp;<%=x%>&nbsp;</option>
             <%end if
         next%>
      </select> 
   </div>
</div>

Screenshot

bootstrap-5
1 Answers

Like this.... Your line of text and your form are now both inside columns which should be above each other on small screens but next to each other on medium screens and above.

<div class="container">
   <div class="row mt-4 ">
      <div class="col-sm-12 col-md-6">
         <p>1. Allowance For Yourself: Select 1 for yourself&nbsp;&nbsp;</p>
      </div>
      <div class="col-sm-12 col-md-6">
         <select class="form-select" name="selT1">
         <option value="0" selected>0</option>
         <%for x=1 to 1
             if strT1=cstr(x) then%>
                <option value="<%=x%>" selected>&nbsp;<%=x%>&nbsp;</option>
             <%else%>                                            
                <option value="<%=x%>">&nbsp;<%=x%>&nbsp;</option>
             <%end if
         next%>
         </select> 
       </div>
   </div>
</div>

I've also restructured your container as it was inside a Row. Don't forget, in Bootstrap they Conainter, Row and Div has to be observed! They should only be nested like this...

<section>
    <div class="container">
       <div class="row">
          <div class="col">

As a side note mt-4 in your Row is adding a margin to the top of the Row. Perhaps change that to py-4 for top and bottom Padding only. You don't really need sideways padding on Row's.

user_171534650
Related