Twitter Bootstrap Question posted in

How to make a list with vertical aligned text? – Twitter bootstrap

I am trying to make to list with a vertical aligned text, but I couldn’t do it no matter how much I tried and searched. So, how do I achieve the following result using twitter bootstrap?!

                                   Ahmed: what's your name?
                                   Bob: ahmed
                                   Cate: ok!

At the moment I have this, which I can’t seem to fix. 

                              Ahmed: what's your name?
                                   Bob: ahmed
                                    Cate: ok!

HTML: 

<div class="container-fluid" align="center">
    <div class="jumbotron">
        <ul style="list-style-type: none; vertical-align: middle;">

            <li><h5><strong>Ahmed and his friends</h5></li>
            <li><h5><strong>life is good</h5></li>

        </ul>

    </div>
</div>
Tags:

2

Answers


  1. 0

    What you will need it’s to have your ul tag centered on the middle of your page and the li align left

    in css you can try to align the item on the right :

    ul {
  margin-left:35%;
}

li {
    text-align:left;
}
    Login or Signup to reply.
  2. 0

    What you seem to want to do is have them left-aligned, and have that element in the middle of the screen.

    The easy way to do this is by having 2 elements. The second element is rendered as inline-block instead of block, so it is not greedy and does not take up all the horizontal space.

    #outer {
  border: 1px solid black;
  text-align: center;
}

#inner {
  border: 1px dotted blue;
  text-align: left;
  display: inline-block;
}
    <div id="outer">
  <div id="inner">
    Ahmed: what's your name?
    <br/>Bob: ahmed
    <br/>Cate: ok!
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search