How to vertically align text in a column with a background color using Bootstrap 4.1

Here is the code that effectively aligns the text in the middle:

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-self-center" style="background-color: #4a90e2">
            Align
        </div>
    </div>
</div>

The current output can be viewed here: https://i.sstatic.net/avEB2.png However, the desired output should fill the entire left column with the background color.

How can I achieve this?

Edit: This is not a duplicate of How can I make Bootstrap columns all the same height?. This issue pertains to vertical alignment.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is a suggested code snippet to try:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 d-flex justify-content-center align-items-center" style="background-color: #4a90e2;">
      Align
  </div>
  <div class="col-md-9">
    <div class="p-2 bd-highlight">Flex item 1</div>
    <div class="p-2 bd-highlight">Flex item 2</div>
    <div class="p-2 bd-highlight">Flex item 3</div>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
</div>

Answer №2

Consider using this tip for your project. ps: For detailed output, refer to the full page content and apply the following class align-items-center

<!Doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-items-center" style="background-color: #4a90e2">
            <h1>Align</h1>
        </div>
<div class="col-md-9"><ul>
<li>content</li>
<li>content</li>
</ul></div>
    </div>
</div>
</body>
</html>

Answer №3

It is recommended that the "align" content be placed inside a centrally aligned inner div rather than centering the column itself.

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 d-flex flex-column" style="background-color: #4a90e2">
            <div class="my-auto">
            Align
            </div>
        </div>
        <div class="col">
            ...
        </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

Is there a way to direct the user's cursor to a specific location on the page when they hover over an image?

I'm interested in creating a script that can manipulate the user's mouse position when they hover over an image. For example, if I hover over the image, I want the mouse to be dragged lower towards a specific text. Is there a method to achieve th ...

javascriptjqueryhtmlcss

Incorrect viewport widths in Vue Bootstrap fluid containers

I require a container that spans 100% of the available width until it reaches a specific breakpoint (max-width). Upon exploring the official documentation, I came across the responsive fluid container, which appeared to be a suitable choice. Responsive ...

cssvue.jsbootstrap-4bootstrap-vue

Firefox hovers with a height of 0 effect activated

Hey there, I'm experiencing an issue in Firefox. When I attempt to use a hover effect on a div to change the height to 0, it's behaving strangely. Is there a way to make it function like it does in Chrome? Here is the code snippet: CSS : #squa ...

htmlcssfirefoxhovertransition

automatically changing radio button selection based on dropdown choice

Let's address the issue at hand: I have a dropdown list with over three options, and alongside it, a radio group for yes or no responses. What I am aiming to achieve is setting the radio button to "no" when option 1 is selected, and to "yes" when any ...

javascripthtml

Retrieving binary content from an HTML5 Canvas using base64 encoding (readAsBinaryString)

Is it possible to extract binary data from an HTML Canvas? Currently, I have the following HTML code displaying an input file and a canvas below it: <p><button id="myButton" type="button">Get Image Content</button></p> <p>In ...

javascripthtmlhtml5-canvasfileapi

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

Another inquiry about bootstrap: Adjusting vertical height only if content does not overflow

My current setup is as follows: <div class="container px-0"> <nav class="..."> </nav> <div class="row px-3"> ...content </div> <div class="row footer-spacer&q ...

htmlcssbootstrap-4

I'm having trouble getting my text values to line up next to my slider bar

I've been troubleshooting this issue for a couple of hours now. (My CSS skills are not the best) Currently, I have two jQuery sliders with values. My goal is to position "Rooms: 0" and "Bathrooms: 0" right next to their respective slider bars. . ...

jqueryhtmlcsscss-float

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

javascripthtmlcsswkhtmltopdfwkhtmltoimage

Sending data from HTML and JavaScript to Python

In the process of developing a website that will operate on an embedded device, I am implementing an interface for users to engage with multiple functions on the site. These functions within the HTML interface will communicate with a Python script, which i ...

javascriptpythonhtmlvariables

Working with a single quotation mark in JavaScript and HTML

This is a question that I have posed previously, and although it may seem straightforward, I have yet to receive a response. I am looking for a way to include a single quote (') in a string. While I am aware that using double quotes can circumvent t ...

javascriptjqueryhtml

Techniques for Shortening Dates in JavaScript

How can I abbreviate a full date in JavaScript? For example, converting 15 September 2020 to 15 SEP 20. I have arrays of dates that need this formatting. ...

javascripthtmlnode.jsarraysdate

Demonstrate HTML and CSS integration through the use of the http.get method

In an attempt to create an iframe-like solution, I am using an http.get call to retrieve a site as an object containing HTML and CSS. The issue arises when using <link> tags because the CSS path is obtained from an external source, causing the HTML t ...

cssangularrxjs

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Currently, I am focused on developing small JavaScript/HTML5 ads for a webpage. Each advertisement comes with its own iframe that occupies a specific size and space on the page. In order to accommodate an expandable ad that needs to surpass the predetermin ...

javascriptjqueryhtmliframe

Retrieve the HTML code from a webpage on a different domain

Looking to extract HTML from another domain. Attempted solution: $.get("http://website1.com", function(data) { alert("Data Loaded: " + data); }); (not working) For example, as the owner of two websites: website1.com website2.com Now, the goal is to ret ...

phpjavascriptjqueryhtmlajax

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

javascriptjquerycss

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

htmlcssvue.jsscrollfrontend

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

htmlcssangularngx-charts

Encountered issue while submitting HTML form using POST method and jQuery

Here is the code for my form: <form id="ereserva" action="index.php" method="post"> <fieldset> <label for="id">ID</label> <input type="id" name="ei" id="eid" readonly class="id text ui-widget-content ui-corner ...

phpjqueryhtmlajax

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS. The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops. Here's the code I've be ...

javascripthtmlcss