Tips for aligning objects within a grid container

Would you happen to know how I can perfectly center text and image together? Below is the code snippet I've been working on:

<div class="container my-5">
        <div class="row py-4 justify-content-center">
            <div class="col-lg-4 mb-4">
                <h1 class="text-dark font-weight-bold mb-3">
                    We're glad you're here
                </h1>
                <p class="mb-4">Our main focus lies in providing top-notch design and development solutions</p>
            </div>
            <div class="col-lg-8"><img src='assets/about.png' class="w-80"></div>
        </div>

    </div>

I attempted to use justify-center, offset, ml-x but sadly, none seem to do the trick. I even went through the bootstrap documentation thoroughly without finding a solution. Would appreciate any guidance or tips!

htmlcssbootstrap-4

Answer №1

If you have a 4 column wide column and an 8 column wide column in your row, the content won't be centered because they already take up the full 12 columns.

Keep in mind that w-80 is not a Bootstrap 4 class, so consider using w-75 or create your own class for w-80 if needed. However, if the image only occupies 80% of the column width, it may not look centered as the content already fills the entire width.

To center the two columns with one being 3 columns wide and the other 7 columns wide, you can use a 1 column offset and have the image at 100% of the 7 column width.

<div class="container my-5">
    <div class="row py-4">
        <div class="col-lg-3 offset-lg-1 mb-4">
            <h1 class="text-dark font-weight-bold mb-3">
                Welcome to our website
            </h1>
            <p class="mb-4">We offer various design and development solutions</p>
        </div>
        <div class="col-lg-7"><img src='bg400x240-1.png' class="w-100"></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

What is the reason for updating only the cell in the final row?

Having trouble updating individual cells in my form-table, as only the last row gets updated each time. Seeking assistance with resolving this issue and understanding how to update all rows separately. Any help would be greatly appreciated. Thank you, Shay ...

phphtml

Directing BeautifulSoup to a specific <tr> class

I'm currently working on a project where I need BeautifulSoup to extract the numbers located in the "Units Sold" column: from bs4 import BeautifulSoup from urllib import urlopen html = urlopen('http://www.the-numbers.com/home-market/dvd-sales/2 ...

pythonhtmlbeautifulsouphtml-parsing

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

As a last resort, I am seeking a quick and simple fix. I have been experimenting with Javascript to implement a 'Read more...' & '... Read Less' feature on six different sections of a single page. The goal is to display only the fi ...

javascriptphpjqueryhtmlwordpress

Basic CSS3 animation

I seem to be having trouble making the transition effect work in this piece of code I want to change the text alignment from left to right, but it's not working. The code is very simple. <style> /* Default State */ div { background: green; ...

csstransition

How to position a dropdown menu to the right of a textbox in a Bootstrap form

Seeking assistance with customizing my accordion. I have a flex-row textbox with icons on the right, and I want to incorporate a menu, as depicted in the image linked below: Accordion Image Below is the code snippet: <html> <head> <s ...

htmlcssbootstrap-5

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

cssreactjsanimationjsx

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

jquerycssuser-interfacejquery-uiaccordion

Guide to customizing the sort arrow colors of b-table in Bootstrap 4 within Nuxt framework

https://i.sstatic.net/axVNu.png Using nuxt and bootstrap, I've noticed that the default sorting arrows in the table are too dark for my background. Is there a way to change the color of these sorting arrows? <b-table show-empty small ...

javascriptcssbootstrap-4nuxt.jsbootstrap-vue

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

jqueryhtmlsmooth-scrolling

Troubleshooting: Issue with CSS chaining adjacent sibling and :checked functionality

When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...

cssgoogle-chromecss-selectorspseudo-class

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

jquerycss

Angular TS class with an ever-evolving and adaptable style

Currently, I am working with angular 9. Does anyone know a way to dynamically change the CSS of a class in a component? .stick-menu{ transform: translate(10px,20px); } I am looking to dynamically adjust the position of x and y values. For example: .stic ...

cssangulartypescript

Tips for aligning a picture to the left side using Bootstrap's Grid System

I'm having trouble positioning my picture on the left side of the cards, as I am still learning how to use bootstrap <div class="row"> <div class="col-sm-6 col-lg-3"> <div class="card"&g ...

htmlcssbootstrap-4

What could be causing the dismiss button to not function properly on the bootstrap alert in my Flask application?

I have included jquery, the boostrap css link in the head, and the bootstrap javascript before the closing body tag. Additionally, I am utilizing Flask. {% for message in get_flashed_messages() %} <div class="alert alert-success alert-dismi ...

htmlflaskwebbootstrap-5

Leverage the Width of a Nested Row within Foundation Framework

Here's a different layout option with a sidebar <div class="row"> <div class="main-content columns small-6> {main content} </div> <div class="columns small-6> {sidebar} </div> </div> And here is a ...

csszurb-foundation

Creating a FadeIn animation for a hidden div element by using the display:none property

Struggling to implement a fadeIn function for a div tag with a display:none property. How can I make the div tag visible and smoothly fade in while still keeping the display:none property? Attempted solution so far: <div class="graphs_line_based cle ...

javascriptjqueryhtmlcss

Out of these two selectors, which one performs better?

Examining the code snippet below: <ul> <li> <a ... Between these two stylesheets which would be more efficient with the same declarations? if any performance gains were to be observed. ul { font-size: 1.25rem } ul a { font-siz ...

cssperformancecss-selectors

I am currently exploring the world of HTML and CSS, but I am struggling to grasp the concept of how contact forms operate. Can anyone provide some

I'm new to learning HTML and CSS and I'm struggling to understand how contact forms function. Where does the email address get stored in this code? Do I need a PHP file for this to work? <section class="signup-section" id="signu ...

htmlcss