CODEWITHSUNDEEP
twitter-bootstrapbulletedlist
Pumizo
Pumizo

Reputation: 283

Bootstrap bulletlists / bulletpoints

How can I turn my actual text into bullet-points like in the given example?

This is what I have

This is what I need

My Bootstrap code

<div class="row">
<div class="span12">
        <div class="inside">
          <hgroup>
            <h2>RESPECT FOR THE INDIVIDUAL</h2>
          </hgroup>
          <div class="entry-content">
            <p>• We listen to the other person without interruption and practice effective listening skills.<br>


Upvotes: 2

Views: 23127

Answers (3)

Claire Lee
Claire Lee

Reputation: 301

My suggestion is better use ul and li to make a list.

<div class="row">
    <div class="span12">
        <div class="inside">
            <hgroup>
                <h2>RESPECT FOR THE INDIVIDUAL</h2>
            </hgroup>
            <ul class="entry-content" style="list-style-type: square;">
                <li>We listen to the other person without interruption and practice effective listening skills.</li>
            </ul>
        </div>
    </div>
</div>

And you can use list-style-type: square; on ul element to change the style of list item.

I just used inline CSS here, you may add the style into your css file.

For your reference, here is the HTML-List and list-style-type definition and usage.

Hope this help :)

Upvotes: 2

gavgrif
gavgrif

Reputation: 15509

Would it be improper to suggest that rather than trying to turn <p> elements into a bulleted list - you simply use a bulleted list :_

      <div class="entry-content">
       <ul>
          <li>We listen to the other person without interruption and practice effective listening skills.</li>
          <li>We do not shy away from challenges</li>
          <li>We stay true to our slogan</li>
        </ul>
      </div>

seems better than trying to reinvent a circular device that turns or to shoehorn one element into the natural behaviour of another. Just a thought... :))

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You can use &#9642; which is a html - unicode as below:

<div class="row">
  <div class="span12">
    <div class="inside">
      <hgroup>
        <h2>RESPECT FOR THE INDIVIDUAL</h2>
      </hgroup>
      <div class="entry-content">
        <p>&#9642; We listen to the other person without interruption and practice effective listening skills.</p>
        <p>&#9642; We do not shy away from challenges</p>
        <p>&#9642; We stay true to our slogan</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions