Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration.

This is the HTML code:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"/>
        </div>
        <div class="col-md-8">
            <ul class="nav nav-pills text-center">
                <li class="active"><a href="#">text1o</a></li>
                <li><a href="#">Text2</a></li>
                <li><a href="#">Text3</a></li>
                <li><a href="#">Text4</a></li>
                <li><a href="#">Text5</a></li>
            </ul>
        </div>
    </div>
</div>

Answer №1

Give this a shot

<div class="col-lg-6 align_center">

html
  .align_center { width: 300px;
                  display: flex;
                  justify-content: center; }

Answer №2

Give this a shot:

<div class="row">
    <div class="col-md-4 container">

.container{height:250px;display: flex;}

.nav-tabs{border-top: 1px solid #428BCA;border-bottom: 1px solid #428BCA;margin:auto 0;}

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

Container containing sliding content underneath

I've designed a grid with separate boxes that reveal related content when clicked. The display of this content is achieved using jQuery's slideToggle feature. The setup functions smoothly, with each row containing clickable boxes that unveil the ...

What is the process of importing an HTML template into a Vue.js project?

I downloaded a template from the internet that I want to import into my vue project. This template includes HTML, CSS, and Javascript files of its own. How can I utilize vue-router to access the index.html file in this template without converting them into ...

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

Ways to increase the font size of the text within the button for forum actions

<form action="https://www.kroger.com/account/communityrewards/" > <input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" /> </form> I'm interested in learning how to increase the font size of the form action ...

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...

What is the best way to locate the offspring of a parent div using its data attribute?

If I have a container div called dvMainDiv with multiple child divs inside it, all added programmatically, how can I retrieve a specific child div based on its data-id attribute? <div id="dvMainDiv" class="dvMainDiv"> <div id="dvChildDiv" cla ...

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

Strategies for avoiding text wrapping in Bootstrap labels on Firefox

Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons: Ch ...

Executing a single query in PHP using multiple WHILE loops

Recently, I've been working on a PHP page that interacts with an Oracle Database through SQL queries. SELECT * FROM TABLE1; My challenge now is to run five WHILE statements based on the value of the recordset. Ideally, it would look something like t ...

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

Is there a fixed header table feature that comes built-in with HTML5?

Is there a native feature in HTML 5 for implementing a fixed header table with a scrollable tbody, while keeping the thead and tfoot fixed? ...

A quick and easy way to locate the object tag along with the param, and insert the embed tag within an HTML document is

Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

Whenever I adjust the size of the browser window, the elements inside the modal box become misaligned. HTML <div class='modal'> <div class='modal-content'> </div> </div> Below is the CSS for the modal ...

Menu drop down offset in Internet Explorer 7

Having some difficulty with a dropdown menu specifically in IE7. The menu functions correctly in all other browsers, but in IE7 it seems to be misaligned for some reason. Any suggestions or insights would be greatly appreciated. Please refer to the menu co ...

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

Motion graphics following the completion of a form input

In my HTML, I've created a div container with a form field: <div class="flex_item" id="b_one"> <form id="f_one"> <input id="i_one" type="text"> </form> </div> I'm attempting to change the backgroun ...

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

Execute Cheerio selector once the page has finished loading

Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...

Why does jQuery function properly in jsfiddle, but not in an HTML file?

I have been troubleshooting repeatedly, but I am unable to figure out why the jQuery code is not functioning as expected. Strangely enough, it works perfectly in jsfiddle! Here is the HTML code: <!doctype html> <html> <head> <meta ch ...