Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width.

body {
  background-color: rgb(26, 40, 114);
}

h1 {
  color: white;
  text-shadow: 7px 7px 10px black;
}

li {
  list-style: none;
  border-radius: 5px;
  border: 2px solid white;
  background-color: black;
  padding: 7px;
  width: 200px;
}

#menu {
  text-align: center
}

#list {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}
<body>
  <h1 class="text-center">MENU</h1>
  <div id="menu">
    <ul id="list">
      <li><a href="#">text_1</a></li>
      <li><a href="#">text_2</a></li>
      <li><a href="#">text_3</a></li>
      <li><a href="#">text_4</a></li>
      <li><a href="#">text_5</a></li>
    </ul>
  </div>
</body>

htmlcsswebbootstrap-4

Answer №1

To center the menu items, apply the following CSS to the id #menu: display: flex; and justify-content:center;. 

body {
            background-color: rgb(26, 40, 114);
        }

        h1 {
            color: white;
            text-shadow: 7px 7px 10px black;
            text-align:center;
        }

        li {
            list-style: none;
            border-radius: 5px;
            border: 2px solid white;
            background-color: black;
            padding: 7px;
            width: 200px;
        }

        #menu {
            display:flex;
            justify-content: center;
        }

        #list {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            text-align: center;
        }
    <body>
    <h1 class="text-center">MENU</h1>
    <div id="menu">
        <ul id="list">
            <li><a href="#">text_1</a></li>
            <li><a href="#">text_2</a></li>
            <li><a href="#">text_3</a></li>
            <li><a href="#">text_4</a></li>
            <li><a href="#">text_5</a></li>
        </ul>
    </div>
    </body>

Answer №2

Here's a simple solution:

#list li {
  margin: auto;
}

Also, don't forget to include this CSS code snippet:

.text-center {
    width:100%;
    text-align:center;
}


   body {
        background-color: rgb(26, 40, 114);
    }

    h1 {
        color: white;
        text-shadow: 7px 7px 10px black;
    }

    li {
        list-style: none;
        border-radius: 5px;
        border: 2px solid white;
        background-color: black;
        padding: 7px;
        width: 200px;
    }

    #menu {
        text-align: center
    }

    #list {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        text-align: center;
    }
    
    /*added:*/
    #list li {
      margin: auto;
    }
    
     .text-center {
    width:100%;
        text-align:center;
    }
<body>
<h1 class="text-center">MENU</h1>
<div id="menu">
    <ul id="list">
        <li><a href="#">text_1</a></li>
        <li><a href="#">text_2</a></li>
        <li><a href="#">text_3</a></li>
        <li><a href="#">text_4</a></li>
        <li><a href="#">text_5</a></li>
    </ul>
</div>
</body>

Answer №3

Another approach is to modify the default styling of the ul element so that it appears like a table. You can achieve this by applying the following CSS to the #list selector:

display: table;
margin-left: auto;
margin-right: auto;

Here's the updated result:

body {
        background-color: rgb(26, 40, 114);
    }

    h1 {
        color: white;
        text-shadow: 7px 7px 10px black;
    }

    li {
        list-style: none;
        border-radius: 5px;
        border: 2px solid white;
        background-color: black;
        padding: 7px;
        width: 200px;
    }

    #menu {
        text-align: center
    }

    #list {
      padding: 0px;
      overflow: hidden;
      text-align: center;
      display:table;
      margin-left:auto;
      margin-right:auto;
    }
<h1 class="text-center">MENU</h1>
<div id="menu">
    <ul id="list">
        <li><a href="#">text_1</a></li>
        <li><a href="#">text_2</a></li>
        <li><a href="#">text_3</a></li>
        <li><a href="#">text_4</a></li>
        <li><a href="#">text_5</a></li>
    </ul>
</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

I am facing an issue where the weather information is not being displayed even after sending a request to

I'm working on building an app that will provide users with weather data once they input a city. Utilizing the openweathermap.org API for this purpose, I've noticed in my console under networks that an API call is made when the city is entered, b ...

htmlcssreactjs

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

javascriptphphtmljquerynan

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

Issue with JavaScript ScrollTop

Simply put, I am trying to determine the total scroll size for a text area in a unit that scrollTop can align with. However, I am at a loss on how to do so. I've tried scrollHeight and various other methods without success. Any advice or suggestions ...

javascripthtmlcssdom

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress

Change Dropdown menu orientation to vertical

Struggling to convert a CSS drop down menu into a vertical menu. I've tried multiple solutions but can't seem to achieve the desired result. Here is my CSS and HTML code, can anyone point out what I might be missing? #sddmT { margin: 0; pa ...

cssmenu

JQuery class for swapping elements upon scrolling

I am currently working on a navigation bar that changes classes to create a fading effect for the background. The approach I have taken involves targeting the window itself and monitoring the scroll position of the user. If the user scrolls down more than ...

javascriptjqueryhtml

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this: btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; So, wo ...

javascripthtmlcsswebdom

Repeated tweets detected within real-time Twitter stream

I've been working on developing a live update Twitter feature, but I've noticed that it sometimes duplicates tweets and behaves erratically. Did I make a mistake somewhere in my code? http://jsfiddle.net/JmZCE/1/ Thank you in advance (note: I p ...

jqueryhtmljsonlive

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

Display or conceal a div element using a dropdown menu selection

I have implemented the following code, which is currently functional and was sourced from a different thread on Stack Overflow: <Select id="colorselector"> <option value="red">Red</option> <option value="yellow">Y ...

jqueryhtml

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Check out this link for more details: . I am looking to eliminate the slim vertical gaps between the images in html5 without resorting to using the table cellpadding="0" cellspacing="0". Any ideas on how to achieve this? ...

csshtmlimage

Display advertisement upon clicking

I am looking to enhance my HTML page by incorporating Google Adsense adverts that load up when a visitor clicks on video links. After 10 seconds, the page should automatically redirect to the video file. Any suggestions on how to achieve this? Thanks! ...

phpjavascripthtmlajaxhyperlink

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

javascriptjqueryhtmlcss

Modify the useRef value prior to the HTML rendering (React functional component)

Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...

javascripthtmlreactjsreact-hooks

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

csstwitter-bootstrapreactjsreact-bootstrap

dismiss data and button for closing notification bar

I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can ...

htmlcss

Switch from Index.html to Index.html#section1

Currently, I am working on a website and sending someone a draft for review. However, the Home screen is designed as a 'a href' link with "#home". The issue arises when the website opens from my computer; it goes to ...../Index.html instead of .. ...

javascriptjqueryhtmlcss

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

I'm struggling with how to reorganize my panels on mobile devices. Each panel has a different size. Please refer to the attached screenshot for the page layout on large screens (col-lg): EDIT: The layout on large screens looks fine, as I prefer not t ...

javascriptjqueryhtmlcsstwitter-bootstrap