Question 219486 in Html Question posted in
Some basic documentation can be found here.

Html – To center content within a <div>

I just started to learn Bootstrap and encountered an issue.
How can I centre the content within the ‘div’?

Image of the issue

This is my code

 <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’ve tried using CSS to apply the display: flex and justify-content: center and inline-block properties to the <div> element.
But it doesn’t change anything at all…

image of what I want

Hope there is someone who can help me with this question, thank you very very much!

Tags:

2

Answers


  1. 0

    You can shorten the .row and center it, for this effect. It would be wise to do that only on desktop width display.

    @media (min-width: 768px) {
  .shorter-container {
    max-width: 80% !important;
    border: 1px solid green;
  }
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
  2. 0

    The first block in the row has the col-md-3 class and the second has col-md-9. Therefore, both columns are taking up 100% width of the row and centering styles have no effect. You’ll need to reduce the width of the blocks or the row.

    I changed the width of the blocks by removing the column classes and declaring width: auto to override Bootstrap’s row > * {width: 100%}. Center inline by adding the justify-content-center class to the row.

    I also went ahead and removed the unnecessary nested divs and the container class.

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

    .row > div {
    width: auto;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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">Work Experience</h2>
  <div class="py-5 row justify-content-center">
    <!-- Company Information Column -->
    <div class="company-1">
      <h3>Graphic Coordinator</h3>
      <p>ABC</p>
      <img src="#" alt="company logo">
      <p>2020-2023</p>
    </div>
    <!-- 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search