Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Emily Easton
Emily Easton
13,575 Points

BOOTSTRAP - How do I make it so the form goes into two columns in a medium vp and up?

I've tried everything I just can't seem to work out how to make my first form "Existing user? Log In" to go into two columns when the vp is medium or bigger. I will include this on the form below as well. I want to make the width of the forms on medium screens and above less, but can't seem to figure out how to use the classes e.g. .hidden-xs-up, as I've tried this and it didn't work for me.

Please help! Also please let me know any advice you have for my formatting or any tips/your opinions, thank you :)

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- /Required meta tags -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="custom.css">
    <!-- /Bootstrap CSS -->

  </head>

  <body>
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-xs navbar-light bg-light">
        <a class="navbar-brand font-weight-bold">MoneyManage</a>
            <div class="dropdown">
                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="index.html">Home</a>
                    <a class="dropdown-item" href="about.html">About</a>
                    <a class="dropdown-item" href="MyMoney.html">MyMoney</a>
                </div>
            </div>
      </nav>
      <!-- /Nav Bar -->



      <h1 class="text-center">Welcome to MoneyManage</h1>
      <h5 class="text-center">If you are new to us check out the about page to find out what we are about and how to use our site!</h5>

      <!-- Log In Forms-->
        <br><h3 class="text-center">Existing User? Log in:</h3>
      <form class="mx-auto" style="width: 80%;">
          <div class="form-group">
              <label for="exampleInputEmail1">Email Address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
          <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
        <button type="submit" class="btn btn-info">Submit</button>
      </form>

            <br><h3 class="text-center">New user? Create an Account:</h3>
       <form class="mx-auto" style="width: 80%;">
        <div class="form-group">

            <div class="form-row">
                <div class="col">
                    <label for="exampleInputFirstName1">First Name</label>
                    <input type="text" class="form-control" placeholder="First name">
                </div>
                <div class="col">
                    <label for="exampleInputLastName1">Last Name</label>
                <input type="text" class="form-control" placeholder="Last name">
                </div>
            </div>

                <label for="exampleInputEmail1">Email Address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email">
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Create a Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-info">Submit</button>
        </form>
      <!-- /Log In Forms -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

I haven't copied in the bootstrap-4 documents in this question because its easier if you just download it off get bootstrap.com .

1 Answer

Bruno Navarrete
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points

Bootstrap uses the "col-md" to set the width of any .form-row direct children. You can check the documentation here but I can also give you a quick example with your code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<form class="mx-auto" style="width: 80%;">
    <div class="form-row">
        <div class="col-12 col-md-6"><!-- will break in 6/12 columns in md,lg and xl devices -->
            <div class="form-group">
                <label for="exampleInputFirstName1">First Name</label>
                <input type="text" class="form-control" placeholder="First name">
            </div>
            <div class="form-group">
                <label for="exampleInputLastName1">Last Name</label>
                <input type="text" class="form-control" placeholder="Last name">
            </div>
        </div>

        <div class="col-12 col-md-6"><!-- will break in 6/12 columns in md,lg and xl devices -->
            <div class="form-group">
                <label for="exampleInputEmail1">Email Address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email">
            </div>
             <div class="form-group">
                <label for="exampleInputPassword1">Create a Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
        </div>
        <div class="col-12"><!-- will always occupy 12 columns -->
            <div class="form-group">
                <button type="submit" class="btn btn-info">Submit</button>
            </div>
        </div>
    </div>
</form>

The col-12 col-md-6 will make the div occupy the whole container (12 columns) until it reaches the md- breakpoint; in this example, each div will ocuppy half the container's width (6 columns) but you can always set it higher or lower as long as it doesn't go over 12.

Emily Easton
Emily Easton
13,575 Points

Ohhhhhhhhh, I understand now. This is the size of the forms, I was looking to make the one column change so the column below went beside it in bigger screens.