csstwitter-bootstrapbootstrap-4alignment
How to center text in second column to page - bootstrap
I have a header with two columns. In the first column is the logo and in the second is a centered heading. Below that is the main content with a centered heading. I am trying to get it so that the heading in the header is centered to the main parent container like the heading in the main content is. I'm using bootstrap 4.6.
Here is a drawing of what I am talking about:
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
min-height: 100%;
}
.row-color {
background-color: #DCE6F2;
}
.logo-width img{
width: 220px;
height: 210px;
}
.column-width img {
width: 120px;
height: 115px;
}
#page-container {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
background-color: #024393;
color: #fff;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" alt="Logo Here">
</div>
<div class="col">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>Here is a codepen: https://codepen.io/west4me/pen/vYywWVX
Solution
.col will stretch to fill the row. In your case, you have a .col-2 in your heading row, so the .col is equal to a .col-10.
If you want to center it, you need to be in the middle of the 12 columns bootstrap grid, which mean 2 cols on each side.
As Rick says, you need to replace your .col by a .col-8
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
min-height: 100%;
}
.row-color {
background-color: #DCE6F2;
}
.logo-width img{
width: 220px;
height: 210px;
}
.column-width img {
width: 120px;
height: 115px;
}
#page-container {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
background-color: #024393;
color: #fff;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" alt="Logo Here">
</div>
<div class="col-8">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?