Twitter Bootstrap Question posted in

Text is wrapping around my left navigation menu – Twitter bootstrap

I’m trying to make a menu. I want text to the right of it but I still want the mobile to be 100% width. When it’s on desktop, how do I make the column not wrap around the div? I could make this 100% height, but then on mobile it might not work.

jsfiddle.net/La909cq3
Notice that name goes to the right of the menu if you stretch the container to be desktop width.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
    <div class="col-md-4">
        <ul>
            <li>
                <a ui-sref="manage.newPerson"><b>Groups of People</b></a>
            </li>
            <li>
                <a ui-sref="manage.newPerson"><b>Make a New Person</b></a>
            </li>
            <li>
                <a ui-sref="manage.people"><b>Make a New Manager</b></a>
            </li>
        </ul>
    </div>
    <div>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Phone Number</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    One solution is to put col-md-4 around the second div http://jsfiddle.net/La909cq3/1/

    <div class="col-md-4">

  2. 0

    Have you tried using word-wrap in CSS?

    Try this, I find it works well for me.

    word-wrap: break-word; 
white-space:normal;

    http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

    Login or Signup to reply.
  3. 0

    I just put clear:both; on your div that wraps around the form. Once i did that your ‘name’ heading stop floating up to the right of your list of items.

    https://jsfiddle.net/6beL3rn5/

    Login or Signup to reply.
  4. 0

    It really only has to do with the fact that the menu and the form need to be in separate grid spaces. you have the menu wrapped in col-md-4 which will flowt ot to the left…but no grid class for the div around the form. Doing this will help that

    Look at how I added an outer div with

    <div class="row">

    and the added the col-md-12 class to both the menu and the form divs.

    http://jsfiddle.net/gbn4hnw1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search