How to put a space in front of a next line [closed]


Tags: html,css,twitter-bootstrap

Problem :

I am trying to achieve some this like this in bootstrap or css

<div class="col-xs-2">Description</div>
<div class="col-xs-4">: I am a noob</div>

I get the following resut:

Description    : I am a 
               noob

How can I do this?

Description    : I am a 
                 noob


Solution :

You could use a pseudo-element to insert the : and keep the space of those along the text:

<div class="col-xs-6 doublep"><span>I am a noob</span></div>

.doublep {
  font-size: 0;
  white-space: nowrap;
}
.doublep:before {
  width: 15px;
  text-align: Center;
  font-size: 14px;
  content: ":";
  display: inline-block;
  vertical-align: top;
}
.doublep span {
  white-space: normal;
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
}

Check this BootplyDemo


    CSS Howto..

    WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin

    How to prevent links from wrapping in CSS megamenu div (inheritance issue)

    How to include several nested CSS classes into rails .erb file?

    How to get a style attribute from a CSS class by javascript/jQuery?

    How to use this jQuery to effect css opacity

    CSS: How do I get wrapped labels to align

    How do I use CSS transitions to fixed position a scaled element?

    How to achieve the following design in css in jquery mobile

    How to make this styling with css

    How to blend an image with a solid colour in CSS?

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    How do I center text vertically with css [duplicate]

    How to show css div depending upon model value?

    How to create a progress bar animation

    Showing HTML page with CSS attached in a WebView

    How to prevent a closing tag from being removed?

    How to add CSS to my HTML code on Notepad++

    How to override a class using jquery

    How to fade text out vertically, similar to Amazon's product descriptions

    how to organize all js, css, php and html code?

    How to remove some css properties without the paticular one using regular expression?

    How to highlight selected tab in Web Forms including Master Page

    How to apply CSS styles to links that appear in table headers?

    How to play specific keyframes with css animation

    How to add condition in Extjs4 tpl for detecting current browser

    How to gray out a HTML element

    How to change anchor color when you hover over a list

    How to add shadow 'wings' to a centered content div

    How to create an infinite Sign Trajectory using CSS animation?

    website div won't stretch from left to right, how do you fix css?