The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and navigation bar into the second DIV col-lg-4 (refer to the code provided), however, upon previewing, I noticed a slight deviation of the logo and navigation to the left.

If anyone could assist me in resolving this matter, I would greatly appreciate it. Thank you in advance.

https://i.sstatic.net/b4ygr.jpg

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img id="logo" src="PlayStation_1_Logo.png">
        </div>
        <div class="col-lg-4 col-md-4"></div>
    </div>
</div>
<!--main navbar-->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container">   
        <div class="row">
            <div class="col-lg-2 col-md-2"></div>  
            <div class="collapse navbar-collapse navbar-menubuilder col-lg-8 col-md-8">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index">Index</a>
                    </li>
                    <li>
                        <a href="service">Service</a>
                    </li>
                    <li>
                        <a href="/about-us">About-us</a>
                    </li>
                    <li>
                        <a href="/news">News</a>
                    </li>
                    </li>
                    <li>
                        <a href="/contact">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-2"></div>
         </div>       
    </div>
</div>

Answer №1

Revise your current code using the following:

<div class="container-fluid">
<div class="row text-center">  
        <img id="logo" src="PlayStation_1_Logo.png">
</div>
<!--main navbar-->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container">          
                <div class="collapse navbar-collapse navbar-menubuilder ">
                    <ul class="nav navbar-nav">
                        <li><a href="index">Index</a>
                        </li>
                        <li><a href="service">Service</a>
                        </li>
                        <li><a href="/about-us">About-us</a>
                        </li>
                        <li><a href="/news">News</a>
                        </li>
                        </li>
                        <li><a href="/contact">Contact</a>
                        </li>
                    </ul>
                </div>   
    </div>
</div>

Add the following CSS styles to it:

<style>
        .navbar .navbar-nav {
            display: inline-block;
            float: none;
        }        
        .navbar .navbar-collapse {
            text-align: center;
        }
</style>

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

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

Javascript error specific to Internet Explorer. Can't retrieve the value of the property 'childNodes'

After removing the header information from the XML file, the issue was resolved. Internet Explorer did not handle it well but Firefox and Chrome worked fine. An error occurred when trying to sort nodes in IE: SCRIPT5007: Unable to get value of the proper ...

Is the image clickable to slide back and forth?

How can I achieve a sliding effect when clicking on the bottom-coupon class? Currently, I am only able to implement show and hide functionalities without any sliding effects. The picture slowly hiding from right to left, with the coupon-layer sliding out f ...

Placing markers on a straight path

Struggling to create a CSS component where the first and last points don't align properly with the ends of the line. This component should be able to handle any number of points (between 1 and 4) without relying on flexbox. I have a React component ...

What is the best way to incorporate AngularJS bindings when loading HTML content from a string?

I am facing an issue in my angular project where I need to load external HTML from a string variable into a div that currently has a controller scoped to it. The problem is that the HTML being loaded contains angular bindings, but once loaded, these bindi ...

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

There seems to be an issue with the navigation bar

I am currently facing an issue with the navigation bar on my website. It appears to be working fine when viewed at full width, but when I shrink the page, the menu button shows up as expected but does not function properly. I have been trying to identify ...

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

Creating a platform where your choices determine the results is my goal for a new website

My goal is to create a unique website that generates text based on responses to multiple choice questions. For instance, users can select symptoms from a list of options and receive recommended medicine at the end of the process. I'm wondering where ...

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

Storing checkbox status in Angular 7 with local storage

I am looking for a way to keep checkboxes checked even after the page is refreshed. My current approach involves storing the checked values in local storage, but I am unsure of how to maintain the checkbox status in angular 7 .html <div *ngFor="let i ...

Adjusting the width of input textboxes for alignment

I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment. <style> #left_col p { margin-top: 15px ...

Ways to access the value of an attribute in an AngularJS object

Is there a way to access the value of field.jobtype within a controller? var app=angular.module('myapp',['ui.bootstrap','ui.select']); app.controller('mycontroller',function($scope){ $scope.onStateSelected = func ...

What measures can be taken to keep the rightmost element from moving when hovered over?

While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

Executing 'npm start' to launch an HTML file along with a CSS stylesheet - A step-by-step guide

As a newcomer to the world of coding, I've found that asking questions on platforms like Stack Overflow enables me to connect with fellow developers. I usually code using VS Code and rely on the "live server" extension to quickly test my code. Howeve ...

Refreshing your web project with the newest and stylish Bootstrap and SASS upgrades

I have been working on an ASP .NET web project that includes jQuery, jQuery UI, and reset/normalize css stylesheets. The CSS code is not up to par, so I plan to revamp it with a budget allocated for the task :) During my research, I found two intriguing s ...

Tips for concealing the top button on a mat calendar

I have a calendar for a month and year, but when I click on the top button it also displays the day. How can I hide that button or instruct the calendar not to show the days? Check out this image I was thinking of using a CSS class to hide that element. ...

Dynamic addition of CSS classes to HTML elements using PHP

I'm working on developing an application that includes multiple courses. Each course is completed over a certain number of days, such as 14 days or 20 days. To visually track progress, I've implemented a step progress bar that looks like this:htt ...

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...