Using Bootstrap to center elements only on specific ones

I am currently working on creating a "navbar/toolbar" with one item positioned on the left side (h3) and three items aligned on the right side (a, a, and select). However, I am facing an issue where only the first item (h3) is vertically centered. Can someone explain why this is happening?

Below is an example of the code I am using:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col">
      <div class="d-flex">
        <div class="align-self-center">
          <h3 class="pl-4">
            Title
          </h3>
        </div>
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If anyone has suggestions on how I can align all the items vertically centered, I would greatly appreciate the assistance.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To center the content, apply the align-self-center class on the div enclosing the anchor tags and select element. Additionally, remove the form-group class from the div enclosing the select to eliminate the excessive margin-bottom that was causing the select to not appear centered. Here are the updated code changes:

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="d-flex">
                    <div class="align-self-center">
                        <h3 class="pl-4">
                            Title
                        </h3>
                    </div>
                    <div class="ml-auto align-self-center">
                        <a class="" href="javascript:void();">
                            1
                        </a>
                        <a class="" href="javascript:void();">
                            2
                        </a>
                        <div style="display: inline-block;">
                            <select class="form-control" >
                                <option>1</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №2

You can simply delete the "align-self-center" class from the code. Here is the updated version:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="padding:20px;">
  <div class="row">
  <div class="col">
      <div class="d-flex">
        <div>
          <h3 class="pl-4">
            Title
          </h3>
        </div>
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

Remember to apply the align-self-center class to the parent div that wraps around all of its child elements.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col">
      <div class="d-flex align-self-center">
       
          <h3 class="pl-4">
            Title
          </h3>
       
        <div class="ml-auto">
          <a class="" href="javascript:void();">
            1
          </a>
          <a class="" href="javascript:void();">
            2
          </a>
          <div class="form-group" style="display: inline-block;">
            <select class="form-control" >
              <option>1</option>
            </select>
          </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

Can we stop a specific container from resizing on mobile devices?

My goal is to have the entire page scale down, except for the navigation container. I'm adjusting some CSS rules to improve accessibility on smartphones, but the issue arises with the multiple images it uses. I need these images to display in their or ...

cssmobile

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...

javascriptjqueryhtmltwitter-bootstrap-3

Sluggish webpage (Jquery and bootstrap)

I encountered a minor issue... I created a webpage using BOOTSTRAP and included the Nivo slider (jquery) on it. I utilized bootstrap for its basic styling and responsive design capabilities (adaptation for mobile, tablet, etc). However, my webpage perform ...

jquerytwitter-bootstrapresponsive-designperformance

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() { if (confirm("Press a button!") == true) { if(this.style.backgroundColor == "white") this.style.backgroundColor = "yellow"; else if(this.style.backgroundColor == "yellow") this.style.backgroundColor = "red"; else i ...

javascripthtmlcss

What is the best way to extract clean text from HTML using JavaScript?

I am struggling with the code below in my HTML file: function hideContent(){ // Need help with this part! } <input type="button" onclick="hideContent()" value="Hide Content"/> <p id='txt'> <span class="A">I am</span> ...

javascripthtml

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

javascriptangularjsajaxhtmlasp.net-ajax

When attempting to launch my JavaFX 2 application from an HTML page, it fails to execute

I recently downloaded the JavaFX 2 samples and encountered an issue when trying to run one of them from its HTML file. Specifically, I am referring to a JavaFX application called BrickBreaker, which consists of three files: BrickBreaker.jar, BrickBreaker.j ...

htmlfirefoxjavafx-2

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

htmlcss

How to replicate a WordPress menu bar

Embarking on my coding journey, I've completed courses in HTML, PHP, CSS, JavaScript, and MySQL. Now, I've decided to dive into hands-on learning by creating a Wordpress child theme. My current challenge is figuring out how to overlay two differ ...

phphtmlcsswordpress

selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value. <!DOCTYPE html> <html> <head> <title>testinggg</title> &l ...

javascriptjqueryhtmlcss

The image slider is blocking the dropdown functionality of the navbar on mobile devices

My code is experiencing a conflict of events. I have created a menu bar using nav bar, as well as an image slider called the caroussel. The issue arises when the window is minimized - the menu bar fails to drop down properly with the presence of the caro ...

javascriptjqueryhtmlcsstwitter-bootstrap

implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...

htmlcss

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

csshtmlcss-positionpositioning

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

javascriptjqueryhtmljsplumb

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel

Achieving overflow behavior in a div with maximum height that contains another div with maximum height (Overflow issue persists)

Currently, I am utilizing Materializecss to showcase a modal window. Within this modal, there is a div Content that showcases items using ng-repeat. However, the issue arises when the content fills up and the css rule for my content-div fails to take effec ...

htmlcss

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

htmlcsssvginline

Tips for aligning buttons in a row

I am trying to find a way to make my buttons more compact within a <div> element when the length exceeds 100%. Is there a way to achieve this while avoiding wrapping to a second line? Is there a solution similar to using scaleX, but one that takes i ...

buttonhtmlcss

What are the steps to completely uninstall Bootstrap from an Angular 6 project?

I recently embarked on the task of removing bootstrap from my Angular 6 project in order to integrate Angular Material instead. After attempting npm uninstall bootstrap --no-save, I proceeded to comment out the bootstrap line in app.module.ts: ... exp ...

bootstrap-4angular6angular7

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

javascriptjqueryhtmlvideoios5