Not Centered Text In Bootstrap Column

September 30, 2022 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:

<div class="row col-md-12">
...
     <div class="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:

<div class="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.

<div class="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 0 50%;
    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;
}

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

.menu li {
    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;
}

.menu a {
    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 {
}

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

.header a{
    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: 30px 0;
    margin-top: 1000px;
}

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

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>

<div id="body-wrapper">
  

<div class="navbar"> 

<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>
                
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
  </div>

<div class="container-fluid">
    <div class="header ">
        <div class="row">
            <div class="col-md-1 text-center">
                <div class="icon-menu">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="col-md-10 text-center">
                <li><a>!</a></li>
            </div>
            <div class="col-md-1 text-center">
            </div>
            </ul>
        </div>
    </div>
</div></div>


<div class="jumbo"></div>

<div class="footer">
    <div class="container">
        <p>&copy; Lorem ipsum.</p>
    </div>
</div>
</div>

</body>

</html>

Html5 stackoverflow Examples

Not Centered Text In Bootstrap Column

Solution 1:

Solution 2:

Solution 3:

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