Bootstrap grid system not working for me. Columns displayed as new rows

Question

0.00/5 (No votes)

See more:

I'm sorry to ask another question here, but my main aim was to learn PHP and I'm getting far too side-tracked while trying to fix the front-end and haven't done any PHP for a while now. Anyway, the issue is this:

I am trying to make a 16-input form and have in my mind what I want it to look like. After going over Bootstrap 4's documentation I thought it looked relatively straight forward so I cracked on.

I'm trying to get the second example input to the right of the first but having no joy whatsoever. I have looked over my code and can't see any reason why it's putting the second example under the first as opposed to to the right of it (like I want).

I feel a little explanation here would go a long way. I can't fathom why it's behaving like it is:

HTML

<pre><!-- form start -->
       
       <form method="post" action="example.php">
          <div class="form-group-row">
           <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
              <input class="form-control" type="text" placeholder="Name" name="name">
               </div>
           </div>
        <br>
            
             <div class="form-group-row">
           <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <input class="form-control" type="text" placeholder="example" name="example">
              
               </div>
               
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
              <input class="form-control" type="text" placeholder="example" name="example">
              
               </div>
           </div>   
       </form>

What I have tried:

I've tried moving the code for the second example input around and not much else as as far as I can see, this should work.

Posted 8-Aug-19 0:58am

Fexxi

Updated 8-Aug-19 4:40am

Add a Solution

2 solutions

Solution 1

Did you make sure you have reference to bootstrap (i.e. bootstrap.min.css) in the head?

Next, you have first element with col size of 8 and only one of the reamining two fields will fit into one row.

Also, the '< br/>' after the first field is probably not needed. The following update to your code puts three fields into 1 row (as I updated col size to 4 for the first field and removed the '< br />' and added a reference to bootstrap cdn.

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="example.php">
         <div class="form-group-row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="Name" name="name">
              </div>
          </div>

            <div class="form-group-row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="example" name="example">

              </div>

              <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
             <input class="form-control" type="text" placeholder="example" name="example">

              </div>
          </div>
</form>
</body>
</html>

Posted 8-Aug-19 2:34am

Benktesh Sharma

Comments

[no name] 8-Aug-19 9:23am

I am using a Bootstrap theme so thought it would have been there, it isn't as far as I can see. When I tried adding the reference everything went tiny, so I'm guessing I can't use it the conventional way.

Benktesh Sharma 8-Aug-19 10:26am

The theme may be an additional dependency. Also check if you are using Bootstrap 3 or 4.

[no name] 8-Aug-19 11:57am

To tell you the truth, I don't know how to check. As I said, this is a PHP learning-curve for me and I've ended up opening a whole can of worms lol. I only see JS Bootstrap calls when I ctrl+f 'bootstrap; so not sure what's happening there. The CSS files are in a folder called 'startbootstrap-sb-admin-2-gh-pages'. I will definitely look into this. Thanks a lot for your help.

Benktesh Sharma 8-Aug-19 12:15pm

Don't worry. Things can be simpler if you make them simpler. Bootstrap is not an exception. For testing things out, just add link to bootstrap from cdn in the same page
. It will override the bootrsap only on this page for your testing.

[no name] 8-Aug-19 9:29am

I wanted one long input and two smaller ones underneith. I will have to look into other things I think. Thanks for your help.

Benktesh Sharma 8-Aug-19 10:25am

You could use col-lg-offset-4 in bootstrap 3 which will move the field by that offset from left.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2019-08-08T04:40:00

You've used the non-existent CSS class form-group-row on your rows. It should be two separate classes: form-group row.

You also don't need the <br>, as Benktesh pointed out.

And since you're spanning the same number of columns at each size, there's no need to specify every size. col-xs-8 will also apply to sm, md, and lg unless you override it:

Grid system · Bootstrap[^]:
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

Demo[^]

NB: If you're using Bootstrap 4, you'll also need to drop the -xs from the column classes:

Grid system · Bootstrap[^]

Size        | Class Prefix
==========================
Extra small | .col-
Small       | .col-sm-
Medium      | .col-md-
Large       | .col-lg-
Extra large | .col-xl-

Updated demo[^]