Twitter Bootstrap Question posted in

Twitter bootstrap – How can correctly align the text on the left into the column of a row?

I am pretty new in Twitter BootStrap and I am going crazy trying to do the following thing related to this JSFiddle example: https://jsfiddle.net/AndreaNobili/DTcHh/11406/

So, in the previous example, I have this row:

<div class="col-md-4">
    <div class="row">
        <div class="col-md-10" style="text-align: right !important;">
            <p>TEST</p>
        </div>

       <div class="col-md-2">
           <i class="glyphicon glyphicon-home"></i>
       </div>

    </div>
</div>

So I correctly obtain a row that contains 2 columns: a bigest one on the left for the text and a smaller one on the right for an icon.

As you can see in the JSFiddle the problem is that I want to align the text on the right so I will have that it is near the icon but I can’t do it.

As you can see I done:

<div class="col-md-10" style="text-align: right !important;">

but I still obtain that the text is on the left of its container.

Why? What am I missing? How can I fix this issue and align the text on the right near my icon?

Tags:

6

Answers


  1. 0 
        <div class="col-md-10" style="text-align: right !important;">
        <p class="text-right">TEST</p>
    </div>

   <div class="col-md-2">
       <i class="glyphicon glyphicon-home"></i>
   </div>

</div>

    Login or Signup to reply.
  2. 0

    This is why using !important is considered a bad practise and is to be avoided unless it’s very important.
    Your definition

    .container p {
    text-align: justify !important;
    }

    in index.css is taking precedence over all the styles. I would suggest removing the important from the above definition and making it more precise to apply to only certain dom elements as required(by using appropriate classes).

    Regarding aligning it to the right, the other answer should work fine; i.e using the text-right class provided by Bootstrap.

    Login or Signup to reply.
  3. 0

    You don’t need to use Bootstrap’s columns (col-md-x, col-sm-x, col-lg-x) in your case, if you want to display two elements side by side.

    Since the screen portion in JSfiddle is quite small on the right for the HTML, your column’s (col-md-xs) will get a bigger width (due to @media queries of Twitter Bootstrap).
    Thus, the two columns will get stacked onto each other.

    You can align the text on the right of the icon, in a way quite similar to the one you already have, by using two HTML elements which are normally displayed inline:

       <div class="row">
       <!-- ICONA: -->
           <div class="col-md-10">
               <i class="glyphicon glyphicon-home"></i>
               <span>HOME</span> 
           </div>
   </div>

    JSFiddle

    Login or Signup to reply.
  4. 0 
     <div class="col-md-4">
    <div class="row">
        <div class="col-md-10" style="text-align: right !important;padding-right: 0">
            <p>TEST</p>
        </div>

        <div class="col-md-2" style="padding-left: 0">
           <i class="glyphicon glyphicon-home"></i>
       </div>

    </div>
</div>
    Login or Signup to reply.
  5. 0

    first of all i want all i want to say that you need to improve of
    using the sequences of the elements how to use them this can easily
    solve your problems and make code very beautiful so people work even
    you will love to when you need to come back to reuse

    below is my try

    This is why using !important is considered a bad practise and is to be avoided unless it’s very important. 

    test{
    float:left;    
}
.test1{
    line-height:30px;
}
    <!-- Column 3:  -->
				<div class="col-md-4">
				
					<div class="row">
                        <!-- ICONA: -->
						<div class="col-md-2 test">
							<i class="glyphicon glyphicon-home"></i>
						</div>
						<!-- CONTENT: -->
						<div class="col-md-10 test1">
							<p>TEST</p>
						</div>						
						
					</div>
	
					 
		                
				</div>

    DEMO

    Login or Signup to reply.
  6. 0

    Just use Bootstrap’s text-right..

    <div class="col-md-4">
       <div class="row">
                    <!-- CONTENT: -->
                    <div class="col-md-10 text-right">
                        TEST
                    </div>
                    <!-- ICONA: -->
                    <div class="col-md-2">
                        <i class="glyphicon glyphicon-home"></i>
                    </div>
       </div>
</div>

    http://codeply.com/go/ICgJMj82ue

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

Back To Top
Search