Change Text-Align Responsively (With Bootstrap 3)

Change text-align responsively (with Bootstrap 3)?

Yes, like this (where your breakpoint is set at 48em):

body{
    text-align: left;
}
@media screen and (min-width: 48em){
    body{
        text-align: justify;
    }
}

The second rule will override the first if the viewport width is greater than 48em.

Bootstrap 3: text-align change at breakpoint?

These are available in Bootstrap 4: Text Alignment

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">  <p class="text-left">Left aligned text on all viewport sizes.</p>  <p class="text-center">Center aligned text on all viewport sizes.</p>  <p class="text-right">Right aligned text on all viewport sizes.</p>
  <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>  <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>  <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>  <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p></div>

How to align text vertically in panel using bootstrap 3

I made little change in your code and its working well now. Here is the updated code for your reference

.container {  padding-top: 30px;}
p {  font-size: 2vw;}
.panel {  border-radius: 0;}
.panel-body {  padding: 0;}
.panel-description {  margin-top 12px;  padding-left: 3px;}
.no-padding-right {  padding-right: 0;}
.main-class {  display: flex;  width: 100%;  flex-wrap: wrap;  align-items: center;}

<div class="container">  <div class="row">    <div class="col-sm-4 col-lg-4">      <div class="panel panel-default">        <div class="panel-body">          Basic panel example        </div>      </div>    </div>    <div class="col-sm-4 col-lg-4">      <div class="panel panel-default">        <div class="panel-body">          <div class="row">            <div class="main-class">                <div class="col-sm-4 col-md-4 no-padding-right">                  <div class="panel-image">                    <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">                  </div>                </div>                <div class="col-sm-8 col-md-8 no-padding">                  <div class="panel-description vertical-center">                    <p>Name<br>Surname</p>                  </div>                </div>            </div>          </div>        </div>      </div>    </div>    <div class="col-sm-4 col-lg-4">      <div class="panel panel-default">        <div class="panel-body">          Basic panel example        </div>      </div>    </div>  </div></div>

Responsive HR alignment in Bootstrap 3

Using pseduo element css you can achieve this. Give h1 position:relative and using :after add a line of width:60px and giving it position:absolute set its position to achieve the desired result :)

.title-block {  display: block;    text-align:left;}.title-block h1 {  margin: 0px;  font-size: 35px; position:relative;  display: inline-block;
}.title-block h1:after{content:'';width:60px; height:1px; background:red; position:absolute; bottom:-5px;left:0px; right:auto; margin:0px auto;}
@media(max-width:768px){.title-block{ text-align:center}.title-block h1:after{left:0px; right:0px;}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="title-block text-xs-center text-lg-left">  <h1>My Title</h1>
</div>

Bootstrap 3 Footer Text Alignment Based on Grid Size

This can be done with using the existing media queries in Bootstrap. Since v.3 is mobile first, I would make all the content centered first, and then on the next larger media query (768) add styles to the elements that need to be left and right aligned. I have edited your code a little as well:

HTML

<footer>
 <div class="container">
   <div class="row">     
     <div class="col-sm-4  ">
       <a href="#"><img src="http://www.kissingerassoc.com/images/1.gif" class="img-responsive center-to-left"/></a>
       <br>
       <br>
    <div class="small center-to-left ">© 2013 Company, Inc.</div>
   </div>

    <div class="col-sm-4">
         <div class="text-center">
           <p><a href="#">Host Company, Inc.</a><br>
            <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
           <p>social media icons</p>
         </div>
     </div>

     <div class="col-sm-4 ">
        <span class="center-to-right">
       <button type="button" class="btn btn-default btn-sm">
       <span class="glyphicon glyphicon-bullhorn"></span><br>
       Feedback
       </button>
     </span>
     </div>
 </div>
 </div>
</footer>

CSS

.center-to-left {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }

.center-to-right {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }

@media (min-width: 768px) {

.center-to-left {
 text-align: left;
 float: left;
 }

.center-to-right {
 float: right;
 text-align: right;
 }

}

vertical-align with Bootstrap 3

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

Demos link:

- Bootstrap 3

- Bootstrap 4 alpha 6

You still can use a custom class when you need it:

.vcenter {    display: inline-block;    vertical-align: middle;    float: none;}

<div class="row">    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">        <div style="height:10em;border:1px solid #000">Big</div>    </div><!--    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">        <div style="height:3em;border:1px solid #F00">Small</div>    </div></div>

Responsive image align center bootstrap 3

If you're using Bootstrap v3.0.1 or greater, you should use this solution instead. It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature.

My original answer is shown below for posterity

---

This is a pleasantly easy fix. Because .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image:

.product .img-responsive {
    margin: 0 auto;
}

Bootstrap 3 Align Text To Bottom of Div

I think your best bet would be to use a combination of absolute and relative positioning.

Here's a fiddle: http://jsfiddle.net/PKVza/2/

given your html:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

use the following CSS:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.

---

Related Topics