Not Centered Text In Bootstrap Column

February 28, 2024 Post a Comment

I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is

Solution 1:

Try this:

<divclass="row col-md-12">
...
     <divclass="col-md-10 text-center"><li><a>!</a></li></div>
...
</div>

If you want change height of header try to set height for div, for example:

<divclass="col-md-10 text-center"style="height:100px;"><li><a>!</a></li></div>

Of course for good style, create a specific style at css with value of height and add to class of your div.

Solution 2:

But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?

It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.

<divclass="col-md-10 text-center"><a>!</a></div>

How can I set the height of the header manually by a command?

You can assign the height property. I also set a background-color, so you can see that the header actually grows.

.header {
  height: 200px;
  background-color: blue;
}

Solution 3:

actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.

here is demo...

$(document).ready(function() {
    $(".icon-menu").click(function() {
    $(".menu").animate({
    left: "0px"
    }, 600);
    $(".icon-menu").toggle(1600);
                          
    $("body").animate({
    left: "185px"
    }, 600);
    });
});

$(document).ready(function() {
$('.icon-close').click(function() {
    $('.menu').animate({
    left: "-185px"
    }, 600);
    $(".icon-menu").toggle(600);
                       
    $('body').animate({
    left: "0px"
    }, 600);
    });
});

html {}

body{
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

body:after {
     border-left: 1px dotted #333333;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto 050%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
     z-index: -1;
    -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }

.menu {
    left: -185px;
    height: 200%;
    position: fixed;
    width: 185px;
}

.menuul {
    border-top: 1px solid rgb(51,51,51);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menuli {
    border-bottom: 1px solid rgb(51,51,51);
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menua {
    color: rgb(51,51,51);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.header {
}

.headeri {
    font-size: 30px;
    margin-top: 15px;
}

.headera{
    color: rgb(250,250,250);
    font-size: 40px;
    text-align: center;
}

.header.col-md-10 {
    background-color: rgb(51,51,51);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.footer {
    background-color: rgb(51,51,51);
    color: rgb(51,51,51);
    padding: 30px0;
    margin-top: 1000px;
}

.footerp {
    color: rgb(250,250,250);
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .mainh1 {
        font-size: 50px;
        padding: 040px;
    }
    .supporting.col {
        width: 100%;
    }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><head><metaname="viewport"content="width=device-width, initial-scale=1"><title>JFP</title><linkrel="stylesheet"href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"><linkrel="stylesheet"href="/static/main.css" ><linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script><scriptsrc="/static/app.js"></script></head><body><divid="body-wrapper"><divclass="navbar"><divclass="menu"><divclass="icon-close"><imgsrc="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"></div><ul><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul></div><divclass="container-fluid"><divclass="header "><divclass="row"><divclass="col-md-1 text-center"><divclass="icon-menu"><iclass="fa fa-bars"></i></div></div><divclass="col-md-10 text-center"><li><a>!</a></li></div><divclass="col-md-1 text-center"></div></ul></div></div></div></div><divclass="jumbo"></div><divclass="footer"><divclass="container"><p>&copy; Lorem ipsum.</p></div></div></div></body></html>

Html5 Pros

Not Centered Text In Bootstrap Column

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Not Centered Text In Bootstrap Column"