In order to position content at the center of a <div> element

Just recently delving into the world of Bootstrap, I've hit a roadblock.

Here's my current conundrum:

 <div class="container px-4 py-5" id="hanging-icons">
    <h2 class="pb-2 border-bottom">Work Experience</h2>
    <div class="container py-5">
      <div class="row">
        <div class="col-md-3">
          <!-- Company Information Column -->
          <div class="company-1">
            <h3>Graphic Coordinator</h3>
            <p>ABC</p>
            <img src="#" alt="company logo">
            <p>2020-2023</p>
          </div>
        </div>
        <div class="col-md-9">
          <!-- Job Description Column -->
          <div class="job-description-1">
            <ul class="line-spacing">
              <li>Crafted engaging graphics for marketing campaigns, elevating brand messaging</li>
              <li>Collaborated on design concepts for seamless cross-platform integration.</li>
              <li>Produced captivating social media graphics to enhance online presence.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</div>

I attempted a fix using CSS by playing around with display: flex and justify-content: center, as well as inline-block properties on the <div> element. However, I didn't see any changes take effect.

Visual representation of my desired outcome:

htmlcssbootstrap-5

Answer №1

The initial block in the row utilizes the col-md-3 class, while the second employs col-md-9. Consequently, both blocks are occupying the full width of the row, resulting in centering styles having no impact. To rectify this issue, you must either decrease the width of the blocks or the row itself.

To address this, I modified the block widths by eliminating the column classes and specifying width: auto to override Bootstrap's default row > * {width: 100%} styling. Center alignment can be achieved by adding the justify-content-center class to the row.

In addition, the extraneous nested div elements and the unnecessary container class were removed for optimization purposes.

<div class="py-5 row justify-content-center">


.row > div {
    width: auto;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62404343387770767211605153517e717f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container px-4 py-5" id="hanging-icons">
  <h2 class="pb-2 border-bottom">Professional Experience</h2>
  <div class="py-5 row justify-content-center">
    <!-- Company Details Column -->
    <div class="company-1">
      <h3>Visual Designer</h3>
      <p>XYZ Corp</p>
      <img src="#" alt="company logo">
      <p>2018-2021</p>
    </div>
    <!-- Job Responsibilities Column -->
    <div class="job-description-1">
      <ul class="line-spacing">
        <li>Designed compelling visuals for marketing initiatives, enhancing brand communication.</li>
        <li>Collaborated on design strategies for seamless multi-channel integration.</li>
        <li>Created engaging social media graphics to boost online visibility.</li>
      </ul>
    </div>
  </div>
</div>

Answer №2

To achieve this effect, you can make the .row shorter and center it. It is recommended to apply this only when the display width is for desktop.

@media (min-width: 768px) {
  .shorter-container {
    max-width: 80% !important;
    border: 1px solid green;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb0acb1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"> (view full page)
<div class="container px-4 py-5" id="hanging-icons" style="border: 1px solid red">
  <h2 class="pb-2 border-bottom">Work Experience</h2>
  <div class="container py-5 shorter-container">
    <div class="row">
      <div class="col-md-3">
        <!-- Company Information Column -->
        <div class="company-1">
          <h3>Graphic Coordinator</h3>
          <p>ABC</p>
          <img src="#" alt="company logo">
          <p>2020-2023</p>
        </div>
      </div>
      <div class="col-md-9">
        <!-- Job Description Column -->
        <div class="job-description-1">
          <ul class="line-spacing">
            <li>Crafted engaging graphics for marketing campaigns, elevating brand messaging</li>
            <li>Collaborated on design concepts for seamless cross-platform integration.</li>
            <li>Produced captivating social media graphics to enhance online presence.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

Unfortunately, I am unable to respond directly to the previous mention of margin: 0 auto;, but there is a bootstrap class called mx-auto that achieves the same effect.

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

Include draggable functionality to a seating chart that is generated dynamically

I developed a function that generates table seats dynamically with equal spacing. The issue arises when I try to drag names from a list and drop them onto the seats as children. Unfortunately, I can't seem to achieve this functionality with the dynami ...

javascriptjqueryhtmlcssjquery-ui

Guidelines for redirecting a page after a jQuery ajax call is made?

I'm working on a login form code and facing an issue where, after the statement is true, it doesn't redirect to the home page. Instead, it just displays the home page on my index page. How can I redirect jQuery Ajax to another page after the sta ...

phpjqueryhtmlajax

Using JavaScript, retrieve the ID of a child element by utilizing details about the parent element

I have implemented a JavaScript function that creates a div element. Within this div, there are multiple checkboxes as child elements. My goal is to use a loop to extract the ids of all these checkboxes. The div has been assigned to a variable named: o ...

javascripthtmlparent-child

A guide on showcasing the compilation results of PHP code directly on the web browser

How can I compile PHP code on an HTML Button click and display the compilation output in a browser? The code snippet below works well in the terminal but doesn't show anything in the browser. I am currently using XAMPP server on a Windows machine. &l ...

phphtmlxampp

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

I'm trying to incorporate some widgets into my Typescript React component. Here is the embed code export default class App extends React.Component { render(): ReactNode { return ( <div> Chart test <div className= ...

javascripthtmlreactjstypescripttradingview-api

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

What's the best way to position a child fixed DIV in relation to a parent fixed div?

Here is the HTML snippet I am working with: <div class="parent"> <div class="child"></div> </div> The corresponding CSS styles are as follows: .parent { position: fixed; } .child { position: fixed; left: ...

htmlcssbootstrap-4

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before? <body> < ...

javascriptjqueryhtmlajaxmagnific-popup

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

javascriptphpjqueryhtmlcodeigniter

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

javascriptjqueryhtmlcsssettimeout

Wrap text elegantly around your images with Flex Mobile

Looking to develop a component for a Flex Mobile app that will allow me to have text wrapped around an image, similar to what you see in articles or blogs. In HTML, this can be achieved with a tag like: <image align='right' /> associated t ...

htmlimageapache-flexmobile

Replacing one <div> with another <div> using a clickable link within the divs

In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...

javascripthtmlcssangularjs

Can the jQuery live function be triggered without the need for an event?

Using the live function in jQuery requires an event to trigger it. More information can be found in the official API documentation. $(".xyz").live('event', function(){ }); I am trying to make the above function run as soon as the dynamicall ...

javascriptjqueryhtml

Attempting to modify the contents of a div by utilizing the CSS :hover pseudo-class

I recall seeing this technique used before, but I am struggling to remember where. My goal is to modify the content of a div when the css :hover state is activated. Below is the CSS code that I am attempting to make work: .mWin_close:hover div.new-label ...

htmlcss

Unable to locate the hidden element

Attempt to access the attribute of a shadow element resulted in encountering ElementNotVisibleException Element with CSS input[type='checkbox'] is not present on screen <checkbox _ngcontent-ebv-c14="" label="User Access" ng ...

htmlcssseleniumselenium-webdriver

Offsetting absolute elements in a horizontal landscape view

When I view my page on a mobile browser (tested on Android JB and iOS 6), it renders fine initially in both portrait and landscape modes. However, the issue arises when I switch from landscape to portrait - the absolute positioned divs are offset from thei ...

htmlcssmobile

Is there a way to align these blocks in a single row?

Having trouble aligning these buttons horizontally. Any suggestions? I've been tinkering with this for a couple of hours now, so decided to seek help here. The desired effect should resemble the image below, but it's not quite there yet. Thank yo ...

htmlcss

What is the best way to ensure that only one of two textboxes is filled out in an HTML form?

Looking to create 2 fields that are mutually exclusive. One will be a FileField and the other a TextBoxField. Is there an HTML form template available for this specific scenario? I've scoured the web but haven't come across one yet. Apologies ...

htmldjango

Choosing a BeautifulSoup tag according to attribute value

Imagine we have an HTML page with an index and some content below. Each element in the index is linked to a related section in the document. Let's say our starting point is an anchor tag with an href value of "#001". We want to search through all the ...

pythonhtmlbeautifulsoup

Understanding which page is being rendered through _app.js in React/Next.js is crucial for seamless navigation and

Currently, I am working on rendering my web navigation and footer on my _app.js file. My goal is to dynamically adjust the style of the navigation and footer based on the specific page being accessed. Initially, I considered placing the navigation and foot ...

javascripthtmlcssreactjsnext.js