Twitter Bootstrap Question posted in

<br> not breaking lines in forms with Bootstrap-Twitter bootstrap

I would like to get a form layout like below

https://jsfiddle.net/May_Y/6w9nd73c/20/

<form id="cat_select" class="form-inline">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

but if I add bootstrap, <br> does not work any more.

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>

I tried with <br style="clear: both;"> but it is not working as well.
How can I get the desired format with bootstrap.

I would like to have only id="query" and id="mySelect" in a different background color. Is this possible?

Thanks.

Tags:

4

Answers


  1. 0

    1. <br> should work with bootstrap, may be something else is breaking your
      tag, Can’t say anything on this without checking your actual code.

    2. To set different background color you need to create some class in css and set that class to specific elements where you need that backgrund color. (in you case id="query" and id="mySelect" )

    Style/CSS
    .classname { background: red; }

    Add class to elements you need

    `<input `id="query" class="form-control mr-sm-2 classname" type="query" placeholder="optional input" aria-label="query" name = 'query'style="width:50%">
<select id="mySelect" class="classname">
   <option value="" disabled selected>Sort by</option>
   <option>1</option>
   <option>2</option>
</select>`
    Login or Signup to reply.
  2. 0

    just remove class=”form-inline” it will work see the imageenter image description here

    Login or Signup to reply.
  3. 0

    Your code is absolutely OK. I don’t know why do you have any problem, but I suggest you to use downloaded version of Bootstrap (no CDN). This is image what I get on the screen with your code:

    Form image

    On the other hand, it’s possible to change background color only for query and mySelect ID classes. Here is the image:

    Background color

    You only need to add additional classes. In my case there are test and test_2 classes. Check image:

    Classes

    Login or Signup to reply.
  4. 0

    br are here direct children of a flex box and are treated like any flex child (standing in the flex flow direction) .

    You may use :

    • another element and set its width to 100% <p class="w-100"><!-- will also break a line if boostrap is not loaded --></p> instead <br><br>

    it requires to modify the HTML

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline ">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select>
  <p class="w-100"><!-- will also break a line if boostrap is not loaded --></p>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>
    • or use a pseudo and order

    it requires to add extra css

    #cat_select:after {
content:'';
width:100%;
height:1em;
order:1;
}
#cat_submit {
order:2
}
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<form id="cat_select" class="form-inline ">
  <input class="c" name="c" id="c" type="text" style="width:10%"><br><br> Select any below:<br><br>
  <input class="l0" name="l0" id="l0" type="text" style="width:30%">
  <input class="l1" name="l1" id="l1" type="text" style="width:30%">
  <input class="l2" name="l2" id="l2" type="text" style="width:30%">
  <input class="l3" name="l3" id="l3" type="text" style="width:50%">
  <input class="l4" name="l4" id="l4" type="text" style="width:50%">
  <input class="l5" name="l5" id="l5" type="text" style="width:100%">
  <input class="l6" name="l6" id="l6" type="text" style="width:100%">
  <br>
  <input `id="query" class="form-control mr-sm-2" type="query" placeholder="optional input" aria-label="query" name='query' value="" style="width:50%">
  <select id="mySelect">
    <option value="" disabled selected>Sort by</option>
    <option>1</option>
    <option>2</option>
  </select><br><br>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="cat_submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search