What is the best way to vertically center the `tab-content` without relying on the tablist for

After examining the form below, my goal is to center only the fields while keeping the navigation buttons in their original position. Specifically, I want only the tab-content to be centered, excluding the tablists.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3b3d2e3f0f7a617d617c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">>

<section class="h-100">
    <div class="rounded-lg d-block d-sm-flex">
        <div class="profile-tab-nav border-right">
            <div class="p-4">
                <img class="rounded-circle" style="width: 100px" alt="Avatar"
                     src={{ request.user.profile.photo.url }}/>
            </div>
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="profile-tab" data-toggle="pill" href="#profile-tab-panel" role="tab"
                   aria-controls="profile" aria-selected="true">
                    <i class="fa fa-universal-access text-center mr-1"></i>
                    Profile
                </a>
                <a class="nav-link" id="security-tab" data-toggle="pill" href="#security-tab-panel" role="tab"
                   aria-controls="security" aria-selected="false">
                    <i class="fa fa-shield text-center mr-1"></i>
                    Security
                </a>
            </div>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
            <form>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="First name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="Last name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="email" placeholder="Email">
                    </label>
                </div>
            </form>
        </div>
    </div>
</section>

I attempted

<div class="tab-content" style="flex-direction: column" id="v-pills-tabContent">

and

<div class="tab-content" style="float: right" id="v-pills-tabContent">

and

<div class="tab-content" style="align-content: center; align-self: center; align-items: center" id="v-pills-tabContent">

and

<div class="tab-content justify-content-sm-center" id="v-pills-tabContent">

but despite trying suggestions from this SO question, the content remains aligned to the left with half the page empty. The only solution that seems effective involves hard coding a left margin, which is not ideal as it lacks flexibility across different screen sizes.

htmlcssbootstrap-5

Answer №1

Flex operates by creating a Flex container housing Flex items within. Therefore, you can position your container within a section as the Flex container. I have omitted the other classes as they serve no purpose.

<div class="d-sm-flex">

Your nav does not require any Flex classes, as it will automatically function as a Flex item. (Note: .border-right does not exist, it should be .border-end)

<div class="profile-tab-nav border-end">

As .tab-content is also a Flex item, you can apply .flex-grow-1 to allow it to occupy all the remaining width within the Flex container (considering the default flex-direction is row). Subsequently, we apply .text-center to center its content horizontally.

<div class="tab-content text-center flex-grow-1" id="v-pills-tabContent">

An alternative is to transform it into a Flex container itself and utilize .justify-content-center:

<div class="tab-content d-flex justify-content-center flex-grow-1" id="v-pills-tabContent">

Example below

Note: the nav does not function, and since it was not mentioned in your query, I left it unchanged.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d809d839ed2dfc3dbd282">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573538382324232536271762796479677a363b273f3666">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<section>
  <div class="d-sm-flex">
    <div class="profile-tab-nav border-end">
      <div class="p-4">
        <img class="rounded-circle" style="width: 100px" alt="Avatar" src={{ request.user.profile.photo.url }} />
      </div>
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" id="profile-tab" data-toggle="pill" href="#profile-tab-panel" role="tab" aria-controls="profile" aria-selected="true">
          <i class="fa fa-universal-access text-center mr-1"></i> Profile
        </a>
        <a class="nav-link" id="security-tab" data-toggle="pill" href="#security-tab-panel" role="tab" aria-controls="security" aria-selected="false">
          <i class="fa fa-shield text-center mr-1"></i> Security
        </a>
      </div>
    </div>
    <div class="tab-content text-center flex-grow-1" id="v-pills-tabContent">
      <form>
        <div>
          <label>
          <input type="text" class="row" placeholder="First name">
        </label>
        </div>
        <div>
          <label>
          <input type="text" class="row" placeholder="Last name">
        </label>
        </div>
        <div>
          <label>
          <input type="email" class="row" placeholder="Email">
        </label>
        </div>
      </form>
    </div>
  </div>
</section>

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

Modifying the div based on the color it is positioned in front of

I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light ...

htmlcss

What is the best way to add animation to a button within a form using CSS?

Creating a Form in index.html: <form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre> <fieldset> <div class="mc-field-group"> <div class="input-cont"> ...

css

The document scales down automatically as I decrease the size of the window, but does not adjust when I switch to a mobile viewport

I've been working on developing a web app with a focus on mobile-first design. When I scale down my Chrome window, everything looks responsive and functions well, adjusting objects to fit the smaller screen size. However, I noticed that when I switch ...

htmlcssgoogle-chromebootstrap-4

Select an item from the options available

Looking to automatically select a specific item from a combobox upon clicking a button on my webpage. The page includes both PHP and JavaScript code for this functionality. Currently, I have a JavaScript function triggered by the "onclick" event of the bu ...

phpjavascripthtml

Alignment of Bootstrap input groups and buttons

I am looking to have the input group aligned on the left side and the "Add New" button aligned on the right side of the row. <div class="row"> <div class="input-group col-sm-6"> <input type="text" class="form-control" placehol ...

csstwitter-bootstrapbuttoninputalignment

The system does not detect the form

I'm having trouble with my form not being recognized. I've gone over everything multiple times but still can't find the mistake. The PHP code is supposed to take the information from the form and display it, but I keep getting an error that ...

phphtml

Ways to retrieve the path of a button found within table cells

https://i.stack.imgur.com/pUYHZ.jpgI'm currently working on a table where I've created a button that's being used in various rows and tables based on certain conditions. There's a specific scenario where I need to display the button for ...

javascripthtml

Utilizing the Aladin Lite application within a React application, despite not being specifically designed for React

I am interested in incorporating the Aladin Lite app into my React application. Typically, embedding the app in a div is straightforward when developing a website without React: <!-- include Aladin Lite CSS file in the head section of your page --> ...

javascripthtmlreactjsastronomy

Vertical and floating alignment

Can you help me with this HTML/CSS challenge? User: Support: Emily Johnson Alex Roberts I am looking to have two input boxes aligned vertically on both the left and right ...

csscss-floatvertical-alignment

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

I am looking to integrate some AngularJS features into a website that currently utilizes jQuery. Here is the issue I am facing: With jQuery, clicking a button triggers a dropdown item change. Please refer to the jsfiddle below for an example: $('# ...

javascriptjqueryhtmlangularjsforms

removing functionality across various inputs

I have a JavaScript function that deletes the last digit in an input field. It works fine with one input, but not with another. It only erases the digit in the first input. <script> function deleteDigit(){ var inputString=docu ...

javascripthtml

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

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

Achieve a full-screen width container in Bootstrap 4 without using the container-fluid class

Is there a way to make the container have a 100% width using media queries so that the elements are contained in a larger screen but not contained in a small one, or vice versa? This code is just an example that used to work with Bootstrap v4 alpha 6, but ...

htmltwitter-bootstrapcssbootstrap-4

Show a random number within a Bootstrap tooltip

I am trying to make a bootstrap popover display a random number every time it is clicked, but my current implementation is only showing the initial number generated and does not update on subsequent clicks. Below is my code snippet: <button type=&qu ...

javascripthtmlbootstrap-5popover

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

javascripthtmlbootstrap-4

Break up the content in table cells with a new line character

How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...

css

Differences in wrapping between IE11 and Chrome/Firefox: <DIV>

Take a look at this jsfiddle link using IE 11, Chrome, and FireFox. Here is the HTML code I am working with: <div style="width:120px;background-color:#EE1111;"> <div class="daytext"><b>27</b></div> <div class="dayitem"> ...

htmlcssgoogle-chromefirefoxinternet-explorer-11

Encountering the error message "Undefined variable '$'" in a script that is loaded after jQuery

My code is simple - it loads jQuery first, followed by a script that uses the $ syntax. However, I keep encountering the error: ReferenceError: $ is not defined Initially, I suspected that the async attribute on the script tag was the issue, but changi ...

javascriptjqueryhtml

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

javascriptjquerycssruby-on-rails