How to horizontally align a dropdown menu in a container using Bootstrap 4 beta

I'm having trouble figuring out how to center my select element within my div.

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row text-center justify-content-center"  style="border: 1px solid red;">   
        <!--SELECT-->
        <select id="selectList" style="width: 200px;">
            <option></option>
            <option value="attendance">Närvaro</option>
            <option value="students">Elever</option>
        </select>
        <hr>

        <!--Js Content-->
        <div id="jsContent"></div>
    </div>
</main>

I've attempted using different Bootstrap classes but haven't been successful in achieving the desired result.

Fiddle:
https://jsfiddle.net/o9b17p2d/38/

UPDATE
While searching for a solution to this issue, I noticed that most resources focus on vertical centering. This is why I believe it's important to address horizontal centering specifically in this question!

csstwitter-bootstrapbootstrap-4

Answer №1

It is recommended to enclose the select and other elements within a Bootstrap col-* instead of directly in the row. To center them, simply use the class mx-auto.

https://www.example.com/go/asdjhfs9782

<main role="main" class="container-fluid">
    <div class="row text-center justify-content-center" style="border: 1px solid blue;">
        <div class="col-12">

            <!--SELECT-->
            <select id="selectList" class="mx-auto" style="width: 200px;">
                <option></option>
                <option value="sales">Sales</option>
                <option value="inventory">Inventory</option>
            </select>
            <hr>

            <!--JS Content-->
            <div id="jsContent"></div>
        </div>
    </div>
</main>

Answer №2

If you're utilizing Bootstrap 4, take advantage of flex to easily center elements within a container. It's a simple and effective approach.

To achieve this, simply include d-flex in the container class and maintain the justify-content-center property.

I introduced a wrapper within the row element to ensure that all components (hr, select, and div.jsContent) are perfectly centered.

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row d-flex justify-content-center" style="border: 1px solid red;">   
        <!--SELECT-->
        <div style="border: 1px solid blue;">
          <select id="selectList" style="width: 200px;">
              <option></option>
              <option value="attendance">Närvaro</option>
              <option value="students">Elever</option>
          </select>
          <hr>

          <!--Js Content-->
          <div id="jsContent">
            JS Content
          </div>

        </div>
    </div>
</main>

https://jsfiddle.net/ramses_lopezs/kwshdgg6/

Answer №3

As mentioned in this post:

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row text-center justify-content-center"  style="border: 1px solid red; width: 100%; position: absolute">   
        <!--SELECT-->
        <select id="selectList" style="width: 200px; position: relative; left: 50%; margin-left: -100px; ">
            <option></option>
            <option value="attendance">Närvaro</option>
            <option value="students">Elever</option>
        </select>
        <hr>

        <!--Js Content-->
        <div id="jsContent"></div>
    </div>
</main>

JS Fiddle Link

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

What steps should I follow to ensure that the content for the back page is printed on the back page of a booklet when using paged.js?

In the case of a booklet printed from folded sheets, it is interesting to note that the number on the back page will always be divisible by 4. If the content does not have a multiple of 4 pages, then the back page will end up inside the booklet. For my cu ...

javascripthtmlcss

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

During the printing process, Vuetify applications allocate space for hidden elements

I have developed a Vue.JS and Vuetify application inspired by the Google Contacts layout. The design includes both a toolbar and a navigation drawer. My goal is to print the content from the browser without including the toolbar and nav drawer. To achieve ...

cssvue.jsvuetify.js

React Bootstrap - Controlled Carousel stops responding to scroll commands

I implemented React Bootstrap Carousel into my GatsbyJS project. Encountering an issue with the controlled carousel as it no longer scrolls. This is being used in a component that showcases 3 Carousel items. const SimpleCarousel = () => { const [ind ...

reactjsbootstrap-4react-bootstrap

Stylish Tabbed Design

Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...

htmlcsslayout

Using CSS, center a div element both vertically and horizontally, and position the footer at the bottom of the page

I am encountering some unexpected behavior for a task that I thought would be simple. I have two main objectives in mind. Firstly, I want the footer to be displayed at the bottom of the page as an actual footer. Secondly, I need the div with the ".center-d ...

javascripthtmlcss

Ways to modify the appearance of an element using a targeted CSS class

I am attempting to customize the font-family of a specific element on a website (https://chromewebstore.google.com/) with my own custom font. To achieve this, I created a Chrome extension locally. However, the element I want to modify does not have an "id" ...

htmlcssgoogle-chrome-extensiongoogle-chrome-devtoolsfont-family

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

When CanvasJS renders the graph, the Bootstrap Row is positioned behind another row

My layout consists of two rows. I have a CanvasJS based graph generating in the top row, but the 2nd row appears to be positioned behind the graph instead of below it. What could be causing this issue? <div class='row'>[Graph generation c ...

htmlcssangularbootstrap-4grid

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

jquerycss

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

Display a dynamic animation once the user switches to the tab

When a user opens the page in a new tab in the background, CSS animations are triggered before they switch to the tab. Is there a method to display the CSS animation only after the user selects the tab? ...

javascriptcsshtmlcss-animations

Sliding sideways with CSS thumbnail navigation

My goal is to create a horizontal scroll menu for a series of thumbnails. I have managed to make it scroll horizontally, but the issue I'm facing is that the thumbnails stack on top of each other and continue to scroll vertically within my div. What I ...

htmlcssejs

Halt animation instantly using jQuery

Is there a way to permanently stop an animation on a webpage that is triggered every second? I have a button labeled "Stop" but when clicked, the animation stops momentarily before continuing. Is there another method to completely remove the animation? You ...

javascriptjquerycss

Loading CSS and JS files in a modular manner

Each time I add a new HTML file to my website, I find myself repeating the process of including various CSS and JavaScript files: <!-- Source for .css style rules --> <link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" ...

htmlcssangularjs

Change the maximum width of the parent element when it is positioned relatively

In my web design project, I have a full-container with a maximum width of 1080px and positioned relatively to hold all content. Within this container, there is another div element (.portfolio) that I want to extend to the full width of the page (max-width: ...

css

What is preventing me from setting the height of a span to 0 pixels?

It seems that when the height is set to 0px, the element doesn't visually shrink... <div id="bg"> <div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div> </div> #bg { back ...

css

How can I make Div elements disappear based on conditions using If/else Statements in a JSP Page?

I've implemented a JSP function that manages user login by verifying their name and password input. However, even if the user enters incorrect information, they can still view the page. I want to hide all content on the page so that the user cannot se ...

jqueryhtmlcssjspif-statement

A layout featuring three columns with two collapsible navigation menus on the left side

An Overview of My Current Project My ongoing project involves a webpage layout consisting of three columns arranged from left to right as follows: Project List Code Details Code Window The Project List and Code Details columns are set with a max-width ...

htmlcssbootstrap-4