Results 1 to 2 of 2

Thread: Frustrated about Alignment

  1. #1
    Junior Member
    Join Date
    Apr 2014
    Posts
    1

    Frustrated about Alignment

    Hi,

    I'm new to bootstrap but I just can't understand why things keep going below the previous div rarther than next to it.

    In this code:

    <div class="col-sm-8">

    <div class="row">
    <div class="col-md-8">Hello</div>
    <div class="col-md-4"> World</div>

    </div>

    <div class="row">

    </div>

    </div>


    Why is Hello and World not next to each other, but instead hello is above and world is below?

  2. #2
    Junior Member
    Join Date
    Mar 2015
    Location
    London
    Posts
    8
    you want both 'Hello' and 'World' to appear next to each other, like a line.

    However, these are block level elements which contain text of their own.

    At some point, you will hit a viewport where the screen constraint with force 'world' to appear below 'Hello'.

    Its just the way it will be.

    change "col-sm-8" to "col-sm-1" to see the two words appear on one line.

    However this will not work once you hit the snapping point of around 1079px, at this point Hello will appear above World.

    I'm also trying to undesrtand why it is you want those two divs wrapped inside of a sm column..

    Anyway here is how I would achieve what you're after-:

    html:

    <div class="col-lg-12">

    <div class="row">
    <div id="HelloDiv" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Hello</div>
    <div id="WorldDiv" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> World</div>

    </div>

    <div class="row">

    </div>

    </div>


    and css:

    #HelloDiv { text-align:right;}
    #WorldDiv { text-align:left;}


    http://jsfiddle.net/MrKumar44/xakh9vkv/1/

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •