Center and justify text, add background color, borders and width BBcodes
Posted: Fri Jul 06, 2018 10:28 pm
These BBcodes center text but allow you control the width, add borders and use any colors. The first number is the height of the border. The second number is the width of the text box in percent. The third variable is the border color and last is the background color. You can use other codes inside this BBcode to center or indent text as shown in the examples below. If additional formatting codes are used, you will need to add line breaks or an HTML character space to display a blank line between paragraphs.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque arcu. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Aenean placerat. Etiam dictum tincidunt diam. Nullam rhoncus aliquam metus. Curabitur bibendum justo non orci. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. Phasellus faucibus molestie nisl. Donec quis nibh at felis congue commodo. Integer lacinia.
Aenean fermentum risus id tortor. Etiam quis quam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Suspendisse sagittis ultrices augue. Nullam at arcu a est sollicitudin euismod. Nullam sit amet magna in magna gravida vehicula. Nullam at arcu a est sollicitudin euismod. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam quis quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum tincidunt diam. Nulla non lectus sed nisl molestie malesuada. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.
Fusce consectetuer risus a nunc. Integer malesuada. Integer in sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer lacinia. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris dictum facilisis augue. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Vivamus luctus egestas leo. Aenean id metus id velit ullamcorper pulvinar. Aliquam erat volutpat. Phasellus faucibus molestie nisl. Praesent dapibus.
BBcode Usage:
HTML replacement:
Help line:
While the code above centers and justifies text on a page, the code below centers the text area but does not justify. If you want the use the whole page width use 100.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
Use transparent for both colors if you don't want a border or different background color.
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
BBcode Usage:
HTML replacement:
Help line:
You can create a box that's centered with text aligned left.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque arcu. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Aenean placerat. Etiam dictum tincidunt diam. Nullam rhoncus aliquam metus. Curabitur bibendum justo non orci. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. Phasellus faucibus molestie nisl. Donec quis nibh at felis congue commodo. Integer lacinia.
Aenean fermentum risus id tortor. Etiam quis quam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Suspendisse sagittis ultrices augue. Nullam at arcu a est sollicitudin euismod. Nullam sit amet magna in magna gravida vehicula. Nullam at arcu a est sollicitudin euismod. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam quis quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum tincidunt diam. Nulla non lectus sed nisl molestie malesuada. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.
BBcode Usage:
HTML replacement:
Help line:
Centered and Justified Text - 80% Page Width
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque arcu. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Aenean placerat. Etiam dictum tincidunt diam. Nullam rhoncus aliquam metus. Curabitur bibendum justo non orci. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. Phasellus faucibus molestie nisl. Donec quis nibh at felis congue commodo. Integer lacinia.
Aenean fermentum risus id tortor. Etiam quis quam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Suspendisse sagittis ultrices augue. Nullam at arcu a est sollicitudin euismod. Nullam sit amet magna in magna gravida vehicula. Nullam at arcu a est sollicitudin euismod. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam quis quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum tincidunt diam. Nulla non lectus sed nisl molestie malesuada. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.
Fusce consectetuer risus a nunc. Integer malesuada. Integer in sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer lacinia. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris dictum facilisis augue. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Vivamus luctus egestas leo. Aenean id metus id velit ullamcorper pulvinar. Aliquam erat volutpat. Phasellus faucibus molestie nisl. Praesent dapibus.
Centered and Justified Text - 60% Page Width
In convallis. Curabitur bibendum justo non orci. Vivamus luctus egestas leo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Aenean id metus id velit ullamcorper pulvinar. Phasellus rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus porttitor turpis ac leo. Curabitur sagittis hendrerit ante. Et harum quidem rerum facilis est et expedita distinctio. Pellentesque sapien. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Phasellus rhoncus. Fusce nibh. Suspendisse sagittis ultrices augue. Curabitur sagittis hendrerit ante. Pellentesque ipsum.
Code: Select all
[TxtWCJ={NUMBER1}, {NUMBER2}, {COLOR1}, {COLOR2}]{TEXT}[/TxtWCJ]Code: Select all
<p><div style="margin-left:auto;margin-right:auto;width:{NUMBER2}%;"><div style="display:inline-block;text-align:justify;background-color:{COLOR2};border:{NUMBER1}px solid {COLOR1};border-radius:8px;padding:10px 15px;">{TEXT}</div></div></p>Code: Select all
[TxtWCJ=border-Hgt, border-width, border-color, bkgrnd-color]TEXT[/TxtWCJ]Centered - 90% Page Width
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
Use transparent for both colors if you don't want a border or different background color.
Centered - 60% Page Width
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Code: Select all
[TxtWC={NUMBER1}, {NUMBER2}, {COLOR1}, {COLOR2}]{TEXT}[/TxtWC]Code: Select all
<p><div style="margin-left:auto;margin-right:auto;width:{NUMBER2}%;"><div style="display:inline-block;text-align:center;background-color:{COLOR2};border:{NUMBER1}px solid {COLOR1};border-radius:8px;padding:10px 15px;">{TEXT}</div></div></p>Code: Select all
[TxtWC=border-Hgt, border-width, border-color, backgrnd-color]TEXT[/TxtWC]You can create a box that's centered with text aligned left.
Box Centered with Text Aligned Left 50% Page Width
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Pellentesque arcu. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Aenean placerat. Etiam dictum tincidunt diam. Nullam rhoncus aliquam metus. Curabitur bibendum justo non orci. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin mattis lacinia justo. Phasellus faucibus molestie nisl. Donec quis nibh at felis congue commodo. Integer lacinia.
Aenean fermentum risus id tortor. Etiam quis quam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Suspendisse sagittis ultrices augue. Nullam at arcu a est sollicitudin euismod. Nullam sit amet magna in magna gravida vehicula. Nullam at arcu a est sollicitudin euismod. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Etiam quis quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum tincidunt diam. Nulla non lectus sed nisl molestie malesuada. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.
Code: Select all
[TxtWL={NUMBER1}, {NUMBER2}, {COLOR1}, {COLOR2}]{TEXT}[/TxtWL]Code: Select all
<p><div style="margin-left:auto;margin-right:auto;width:{NUMBER2}%;"><div style="display:inline-block;text-align:left; background-color:{COLOR2};border:{NUMBER1}px solid {COLOR1};border-radius:8px;padding:10px 15px;">{TEXT}</div></div></p>Code: Select all
[TxtWL=border-Hgt, border-width, border-color, backgrnd-color]TEXT[/TxtWL]