Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Media Queries / Responsive Design / Twitter Bootstrap

Elements Not Aligning In Bootstrap

Post a Comment
I would like for each icon to align with their respective heading. But this is what it looks like instead: CSS HTML: I tried to make this section in responsive ,I'll try and fix

Solution 1:

I think your h4 elements have a margin-top.

You should add 'col-xs-12' class before 'col-sm-4'. Something like :

<div class="col-xs-12 col-sm-4 bx">

Maybe just remove this margin-top will do the trick...

.section-service.bxh4{
   margin-top:0px;
}

or add to this existing selector :

.section-service.bxh4 {
    text-transform: uppercase;
    color: #535355;
    margin-top:0px;  // <-- this line
}

Maybe you've got too an other css file who override this margin-top. So you just have to append a !important like this :

margin-top:0px!important;

Snipet :

.section-service.bxh4 {
    text-transform: uppercase;
    color: #535355;
    margin-top:0px;
}

.section-service.bxspan {
    font-size: 250%;
    float: left;
    width: 25%;
}
.section-service.bxh4,
.section-service.bxp {
   float: right;
    width: 75%;
}
<html><head><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><linkrel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css"><linkrel="stylesheet"type="text/css"href="resources/css/styles.css"><linkrel="stylesheet"type="text/css"href="resources/css/responcive.css"><linkhref='https://fonts.googleapis.com/css?family=Lato:300,400,700'rel='stylesheet'type='text/css'><linkhref='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'rel='stylesheet'type='text/css'></head></html><sectionid="service"class="section-service"><divclass="container"><divclass="row"><h2>our service</h2><pclass="long-copy">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div><divclass="row  js--wp-2"><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-desktop"></span><div><h4>web development</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p></div></div><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-paw"></span><div><h4>digital desighn</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p></div></div><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-magic"></span><div><h4>marketing</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                    </p></div></div><divclass="clearfix"></div><divclass="row"><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-shopping-cart"></span><div><h4>e-commerce</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p></div></div><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-mobile-phone"></span><div><h4>app development</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p></div></div><divclass="col-xs-12 col-sm-4 bx"><spanclass="fa fa-rocket"></span><div><h4>s.e.o</h4><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknowns printer took a galley of type and scrambled
                        </p></div></div></div></div></div></section>

Here is a bootply to experiment : http://www.bootply.com/D7jGgqj9LC , you can click on the phone icon to test in smartphone view.

Solution 2:

Please try this:

.section-service.bxh4, .section-service.bxp {
    float: right;
    width: 75%;
    margin-top: 0;
}

Post a Comment for "Elements Not Aligning In Bootstrap"