CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
leehman
leehman

Reputation: 13

How to custom align content in columns but keep text left aligned?

I'm trying to align text content in a column. I don't know how I can align the whole content to the center or to the right of the column and keep the text content left aligned.

I have added an example to jsfiddle: https://jsfiddle.net/k58vr4nq/

Currently the colums looks like this:

|-----------------------------------------------|
|Lorem ipsum    |Lorem ipsum    |Lorem ipsum    |
|dolor sit      |dolor sit      |dolor sit      |
|amet           |amet           |amet           |
|consetetur     |consetetur     |consetetur     |
|sadipscing     |sadipscing     |sadipscing     |
|-----------------------------------------------|

I'm expecting something like this:

|-----------------------------------------------|
|Lorem ipsum    |  Lorem ipsum  |    Lorem ipsum|
|dolor sit      |  dolor sit    |    dolor sit  |
|amet           |  amet         |    amet       |
|consetetur     |  consetetur   |    consetetur |
|sadipscing     |  sadipscing   |    sadipscing |
|-----------------------------------------------|

Upvotes: 1

Views: 1782

Answers (4)

Hadia Khan
Hadia Khan

Reputation: 1

add to CSS

.text-center{
     text-align: left;
     padding-left: 1em;
}
.text-right{

}

Upvotes: 0

StudioTime
StudioTime

Reputation: 23989

Add your content into a block with display: inline-block so it fits to size, align within that block, then align the block.

See below (I wouldn't do it inline, it's there to show what's going on):

Here's your fiddle updated

<div class="container">
    <div class="row">
        <div class="col">
            <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
        <div class="col text-center">
             <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
        <div class="col text-right">
             <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Mirza Mašić
Mirza Mašić

Reputation: 119

First, you add your text for each column in div, so it becomes element with width of widest text line. Then, you use flexbox on parent (col element) and align the divs however you want.

HTML:

<div class="container">
  <div class="row">
    <div class="col text-container left">
      <div>
        Lorem ipsum<br/>
        dolor sit<br/>
        amet<br/>
        consetetur<br/>
        sadipscing<br/>
      </div>
    </div>
    <div class="col text-container middle">
      <div>
        Lorem ipsum<br/>
        dolor sit<br/>
        amet<br/>
        consetetur<br/>
        sadipscing<br/>
      </div>
    </div>
    <div class="col text-container right">
      <div>
        Lorem ipsum<br/>
        dolor sit<br/>
        amet<br/>
        consetetur<br/>
        sadipscing<br/>
      </div>
    </div>
  </div>
</div>

and CSS:

.col {
  border: solid 1px #6c757d;
}

.text-container {
  display: flex;
}

.middle {
  justify-content: center;
}

.right {
  justify-content: flex-end;
}

Here's jsfiddle of complete solution: https://jsfiddle.net/7vetqkrz/

Upvotes: 1

Jo&#227;o Rodrigues
Jo&#227;o Rodrigues

Reputation: 913

For that purpose, you would have to wrap your col content inside an element:

<div class="col">
  <div class="content">
     Lorem ipsum<br/>
      dolor sit<br/>
      amet<br/>
      consetetur<br/>
      sadipscing<br/>
  </div>
</div>

Then you would have to style that content class with some margin:

  .content {
    margin-left: 1rem;
  }

Fiddle: https://jsfiddle.net/2ukyqo7m/4/

Upvotes: 0

Related Questions