BBCode: Style your text

Table Of Contents

  • What is BBCode?

    BB stands for "Bulletin Board". It has two benefits:

    1. It is safer than HTML, and helps to prevent malicious users from destroying pages (or your computer!) by disallowing certain HTML tags that can be damaging, and
    2. It is simpler than HTML, so even people who don't know anything about making websites can still have some control over the look and feel of their text.

  • How does BBcode work?

    Most BBCode consists of an opening tag and a closing tag, with the text you want to format going in between. If your BBCode isn't working, be sure to check that you've remembered to close your tags.

    An opening tag might look like this: [b]

    Closing tags generally look just like the opening tag, but with a slash, like this: [/b]

  • Bold, Italic and Underline

    To bold, use [b][/b] tags.
    To italicize, use [i][/i] tags.
    To underline, use [u][/u] tags.
    To strikeout, use [s][/s] tags.

    BBCode:
    This text has some [b]boldness[/b] in it!
    This text has some [i]emphasis[/i] on it!
    This text is [u]underlined[/u].
    This text is [s]struck out[/s].
    What it will look like:
    This text has some boldness in it!
    This text has some emphasis on it!
    This text is underlined.
    This text is struck out.

  • Change text size

    To change the size of your text, use a [size=x][/size] tag. Just pick a number between 0 and 7 to represent the size you want and put it in place of the x, with 0 being the smallest and 7 being the largest.

    BBCode:
    [size=0]This text is size 0 (tiny).[/size]
    [size=1]This text is size 1 (very small).[/size]
    [size=2]This text is size 2 (small).[/size]
    [size=3]This text is size 3 (normal).[/size]
    [size=4]This text is size 4 (large).[/size]
    [size=5]This text is size 5 (very large).[/size]
    [size=6]This text is size 6 (huge).[/size]
    [size=7]This text is size 7 (ridiculous).[/size]
    What it will look like:
    This text is size 0 (tiny).
    This text is size 1 (very small).
    This text is size 2 (small).
    This text is size 3 (normal).
    This text is size 4 (large).
    This text is size 5 (very large).
    This text is size 6 (huge).
    This text is size 7 (ridiculous).

  • Font color

    To change your text color, use the [color=blah]...[/color] tag. You can either enter a color name, or a HEX code.

    BBCode:
    [color=red]This text is red.[/color]
    [color=#7A95FF]This text is periwinkle.[/color]
    What it will look like:
    This text is red.
    This text is periwinkle.

  • Alignment

    There are five tags you can use to align your text. [left][/left], [right][/right], [center][/center], [justify][/justify] and [indent][/indent]. Indent adds about a half-inch margin to the left side, useful if you want to set something apart from the rest of your text, like a quote or some song lyrics.

    BBCode:
    [right]This text is right aligned[/right]
    [left]This text is left aligned[/left]
    [center]This text is centered[/center]
    [justify]This text is justified[/justify]
    [indent]This text is indented[/indent]
    What it will look like:
    This text is right aligned
    This text is left aligned
    This text is centered
    This text is indented

  • Images

    To add an image, use the [img]your picture url here[/img] tag.

    BBCode:
    [img]http://www.rprepository.com/imgs/pizzadragon.png[/img]
    What it will look like:

    If you want to let text wrap around your images, you can use the align parameter to move the image to the left or right like so:

    BBCode:
    [img align=left]http://www.rprepository.com/imgs/pizzadragon.png[/img]
    What it will look like:
    Here is a bunch of text that is going to wrap around my image. I can create lots of great effects on my character profile with this simple technique. In this example, I moved the image to the left of the text, but I could just as easily have moved the image to the right. The difference between this command and the [right][/right] and [left][/left] alignment tags that are shown above is that in those cases, the thing inside the tags will be moved to the correct location, but they won't necessarily cause text (or anything else) to move up to occupy the new empty space that was created. The only way to be sure that your image will make room for other things on the same line is to use this special alignment property in conjunction with the image tag.

    Be warned: More things may wrap around your image than you originally bargained for!

  • Links

    To place a link, surround the text that you want to be clickable with the [url=][/url] tags, with the = pointing to the URL where you want the link to go.

    BBCode:
    [url=http://www.rprepository.com/]This link will take you to the homepage.[/url]
    What it will look like:
    This link will take you to the homepage.

  • Lists

    There are several types of list possible with BBcode. The simplest uses the [list][/list] tags, with each point in the list preceded by a [*] tag.

    BBCode:
    [list]
    [*]Apples
    [*]Bananas
    [*]Oranges
    [*]Strawberries
    [/list]
    What it will look like:
    • Apples
    • Bananas
    • Oranges
    • Strawberries

    Alternatively, if you would like a numbered list, use [list=1][/list]

    BBCode:
    [list=1]
    [*]Apples
    [*]Bananas
    [*]Oranges
    [*]Strawberries
    [/list]
    What it will look like:
    1. Apples
    2. Bananas
    3. Oranges
    4. Strawberries

  • Youtube videos

    If you would like to embed a youtube video into your profile, you need only use the [youtube][/youtube] tags. What goes inside the tags is the video ID.

    Most youtube videos have URLs that look something like this: http://www.youtube.com/watch?v=xMrN3Rh55uM That garble of numbers and letters is the video ID, and what you want to put inside the tags.

    BBCode:
    [youtube]xMrN3Rh55uM[/youtube]
    What it will look like:

    If you want to make the video bigger or smaller, you may also include a width and height, like so:

    [youtube width=640 height=385]xMrN3Rh55uM[/youtube]

  • Vimeo videos

    If you would like to embed a vimeo video into your profile, use the [vimeo][/vimeo] tags. What goes inside the tags is the video ID.

    Most vimeo videos have URLs that look something like this: http://vimeo.com/10351634 Those numbers are the video ID, and what you want to put inside the tags.

    BBCode:
    [vimeo]29189421[/vimeo]
    What it will look like:

    If you want to make the video bigger or smaller, you may also include a width and height, like so:

    [vimeo width=400 height=225]29189421[/vimeo]

  • Hiding spoilers

    If you want to talk about the end of a movie but don't want to spoil it for those who haven't seen it, the [spoiler][/spoiler] tag is a good way to go. It will blot out the offending text, so that it has to be highlighted to be read. That way, people can choose whether they want to know the end of the movie in advance or not.

    This is a great option, because it will work even for people who have disabled javascript.

    BBCode:
    [spoiler]Put your opinions in here, where people who don't want things revealed to them in advance won't be able to see them.[/spoiler]
    What it will look like:
    Put your opinions in here, where people who don't want things revealed to them in advance won't be able to see them.

  • Collapse tags

    [collapse][/collapse] is a fancy, interactive tag! As the title implies, it will condense a large amount of information into a very small space, and through the use of javascript, reveal it when the title is clicked.

    BBCode:
    [collapse=Click on me to reveal more information!]You can put secret or extra information you don't want cluttering your page inside here. It will be revealed when someone clicks on the title.[/collapse]
    What it will look like:
    Click on me to reveal more information!
    You can put secret or extra information you don't want cluttering your page inside here. It will be revealed when someone clicks on the title.