Aligning text at the center using bootstrap

I'm struggling with centering text within my website links, specifically in the navigation section "about me," "portfolio," "skills," and "contact." I've tried adding the text-center class and using the text-align function in the CSS, but nothing seems to work.

The code snippet below shows the structure of my website's navigation bar and the attempts I've made so far. I believe someone with HTML experience could easily identify the issue and provide a solution.

#mainContainer{
    z-index:0;position:fixed; 
    width:100%; height:100%; 
    background-color: white;
}
.headerClass{
    margin-top:auto;
    margin-bottom:auto;
}
#headText{
    color:white;
    font-size: 1.5vw;
    font-family: fantasy;
    vertical-align: middle;
}
#infoBox{
    height:100%;
    width:100%;
}
#infoBoxCol{
    background-repeat: no-repeat;
    background-size:cover;
}
.navbar{
    border-style: solid;
    border-color: white;
    width: 100%;
    color:white;
    font-family:fantasy;
    font-size: 1.1vw;
    text-align:center;
}
.navRoof{
    text-align:center;
    width:100%;
    height:10%;
    background-color:white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid  text-center" id="mainContainer">
    <div class="row" style="background-color: black; height:30%;">
        <div class="col-4 my-auto text-fluid" class="headerClass" id="headText">
            Software Developer
        </div>
        <div class="col-1"></div>
        <div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
        <div class="col-1"></div>
        <div class="col-4 my-auto">
            <div class="row" id="navigation">
                <div class="col-3"><a href="Index.php" class=" navbar text-center">About Me</a></div>
                <div class="col-3"><a href="Index.php" class="navbar text-center">Portfolio</a></div>
                <div class="col-3"><a href="Index.php"  class="navbar text-center">Skills</a></div>
                <div class="col-3"><a href="Index.php" class="navbar text-center">Contact</a></div>
            </div>
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

When it comes to design, I prefer using Bootstrap Flex instead of the traditional row > col-* setup for a more flexible layout. One common mistake I see is overwriting the Bootstrap class "navbar" with additional properties, which can lead to design issues. It's also not recommended to use 'vw' as a unit for font size if you're aiming for a responsive design.

#mainContainer{
    z-index:0;position:fixed; 
    width:100%; height:100%; 
    background-color: white;
}
.headerClass{
    margin-top:auto;
    margin-bottom:auto;
}
#headText{
    color:white;
    font-size: 1.5vw;
    font-family: fantasy;
    vertical-align: middle;
}
#infoBox{
    height:100%;
    width:100%;
}
#infoBoxCol{
    background-repeat: no-repeat;
    background-size:cover;
}
.navRoof{
    text-align:center;
    width:100%;
    height:10%;
    background-color:white;
}
.custom-navbar-container {
  border-style: solid;
  border-color: white;   
}
.custom-link {
  white-space: nowrap;
  color:white;
  font-family:fantasy;
  font-size: 1.1vw;
  padding: .25rem;
  display: block;    
}
.custom-link:hover {
  text-decoration: none;
  color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid  text-center" id="mainContainer">
    <div class="row" style="background-color: black; height:30%;">
        <div class="col-4 my-auto text-fluid headerClass" id="headText">
            Software Developer
        </div>
        <div class="col-1"></div>
        <div class="col-2 my-auto"><img class="img-fluid" src="images/logo.jpg" style="max-width:85%;"></div>
        <div class="col-1"></div>
        <div class="col-4 my-auto">
            <div class="d-flex" id="navigation">
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">About Me</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Portfolio</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Skills</a>
                  </div>
                </div>
                <div class="p-1">
                  <div class="custom-navbar-container">  
                    <a href="Index.php" class="custom-link">Contact</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Angular: module instantiation unsuccessful

Just getting started with Angular and running into an issue where the module seems to be unavailable. https://docs.angularjs.org/error/$injector/nomod?p0=plopApp My code is very basic at the moment, just setting things up: @section scripts{ <script s ...

javascripthtmlangularjsclient-side

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Access the website by logging in with idhttp

I'm attempting to log in to a website using Delphi / Indy. Currently, I only have a button (used to send a password / username) that calls this procedure. procedure TForm5.Login(name: string; Pass: string); var UserID :string; Password :string; res : ...

htmldelphidelphi-xe2indyindy10

Are there any alternative methods to elegantly organize a form within a table other than the one showcased here? My form consists of varying numbers of

Within the initial row, I have incorporated four columns, while rows 2-4 contain two columns each to enhance the formatting. I am seeking a more elegant approach to address this issue and avoid triggering the validation warning. This task pertains to a s ...

htmlcss

Code in PHP for implementing the Caesar cipher algorithm

(check out this example on jsfiddle: Caesar cipher) I have been working on a Caesar cipher, which involves shifting alphabetic characters; for example, with a shift parameter of 3: Original: a => d, b => e, c => f, ... Here is what my code look ...

phphtmlencryptionhtml-table

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

htmlcssangularstylesp-table

Lists within lists and the use of percentages

There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy. The issue with nested <ol>, <ul>, and <li> elements ...

htmlcsscss-position

Creating an HTML table with multiple styled images is a simple process that can greatly enhance the

I am experiencing difficulty with arranging images The primary goal is to achieve this layout: ---------------———————- Table header ----------------—————— | Img1 | | img4 | -------| Img3 |--————— | Img2 | ...

htmltwitter-bootstraphtml-table

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

Below is a snippet of my code: <body> <table> <tbody> <div>test</div> </tbody> </table> </body> Upon executing the code mentioned above, it transformed automatically in ...

htmlcsshtml-table

Move your cursor over X or Y to alter the color of Y exclusively

I am currently designing a navigation bar that includes icons followed by the title of their respective pages (for example, an icon of a home followed by the text 'Home'). I would like to change the color of only(!) the icon from black (default) ...

htmlcsshover

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Is It Always Necessary to Specify a Width and Height for an Image?

Is it necessary to specify both the Width and Height of an image on a webpage for consistent display across all browsers, or is specifying just one sufficient? While it may appear fine on certain browsers, I want to double-check for accuracy. Appreciate ...

html

Automatically collapse the Bootstrap4 Dropdown Menu upon clicking the select element

After tackling my previous issue on Stack Overflow, I stumbled upon a new question that has been bothering me. The problem arises when users click on the arrow to reveal advanced search options, as the form drops down as expected. However, when a user cli ...

javascriptdrop-down-menubootstrap-4dropdownpopper.js

What exactly powers Angular JS behind the scenes?

I have recently embarked on my journey to learn Angular JS. Despite this, I find myself struggling to grasp a deep understanding of how Angular actually operates internally. Take for example the w3schools' initial sample: <script src="https://aj ...

javascripthtmlangularjs

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

I have a unique script that allows me to open links randomly, but now I want to create a new script that opens links sequentially and goes back to the initial one. For example, clicking a button will open link1, then clicking it again will open link2, an ...

javascripthtmlweb

Optimizing Container size for devices with smaller screens

After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there. If you'd like to see an image of the issue, click ...

htmlcsstwitter-bootstrap

Developing dynamic HTML content using Android and JavaScript to insert JavaScript code into the head tag dynamically

I need to incorporate a banner into my Android application in a specific way. Upon receiving the following Javascript code from the server: <script type="text/javascript" src="http://rm.face.ua/adriver.core.2.js"></script> <div id="adri ...

javascriptandroidhtmlwebview