Twitter Bootstrap Question posted in

Align text with previous text after a line break-Twitter bootstrap

Disclaimer: I have seen similar threads to this before, but none of which seem to work. I have a layout which looks as follows:

enter image description here

See the pink text? Well, I want that to be aligned with Initial text after the line break and not start from the beginning of the div which wraps it all around.

As other threads suggested, I have played a bit with display: inline-block, which only brought the whole pink text down, but did nothing for the alignment. What can I do in this context so that after the lign break it starts from the same spot the Initial text starts?

here is my current JSX code:

  <div style={{width: '500px'}}>
    <span>5-</span>
    <span className='label-margins label label-default' style={{backgroundColor: 'rgb(FF, AA, AA)'}}>Some Label</span>
    <span>
      <span className='initial-text'>Initial text</span>
      <small className='warning-text'>
        Warning text. Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld
      </small>
    </span>
  </div>

And here is the relevant CSS:

.initial-text {
  padding: 0 4px;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

Also, my fully-functional example:

class App extends React.Component {
  
  render() {
    return (
      <div style={{width: '500px'}}>
        <span>5-</span>
        <span className='label-margins label label-default' style={{backgroundColor: 'rgb(FF, AA, AA)'}}>Some Label</span>
        <span>
          <span className='initial-text'>Initial text</span>
          <small className='warning-text'>
            Warning text. Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld
          </small>
        </span>
      </div>
    )  
  }

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.initial-text {
  padding: 0 4px;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Tags:

2

Answers


  1. 0

    Flexbox can do that…apply flexbox to the parent div & span and…

    .initial-text {
  padding: 0 4px;
  flex: 1 0 auto;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

.wrap {
  display: flex;
}

div {
  display: flex;
  align-items:flex-start;
}

    class App extends React.Component {

  render() {
    return ( <
      div style = {
        {
          width: '500px'
        }
      } >
      <
      span > 5 - < /span> <
      span className = 'label-margins label label-default'
      style = {
        {
          backgroundColor: 'rgb(FF, AA, AA)'
        }
      } > Some Label < /span> <
      span className = "wrap" >
      <
      span className = 'initial-text' > Initial text < /span> <
      small className = 'warning-text' >
      Warning text.Blablablablabalbalbalablablablablablablablabalb asbhlablablanl akbadlnalbnda kbadslkds baksdbld <
      /small> < /
      span > <
      /div>
    )
  }

}

ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);
    .initial-text {
  padding: 0 4px;
  flex: 1 0 auto;
}

.warning-text {
  color: #ff8080;
  padding: 3px 7px;
}

.wrap {
  display: flex;
}

div {
  display: flex;
  align-items: flex-start;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
    Login or Signup to reply.
  2. 0

    Have you try using the dl list? You can adjust the style in order to get what you want using float:

    <style> dl {clear:both} dt,dd {float: left} </style>

<dl>
  <dt> example</dt>
  <dd>this is some very very very very long long long long text inorder to expand the line to another line. This is some other example text bla bla bla yada yada yada etc... Read more about this element here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl </dd>
</dl>

    Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search