Change the width size of columns in footer in html

January 5, 2023

I have the following html code:

<div class="container">
    <div class="row">

        <div class="col-lg-6">
            <div class="footer-top-box wow fadeInUp">
                <section id="text-6" class="widget widget_text">
                    <div class="textwidget">
                        <p>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1630.9930663068005!2d33.3123738581399!3d35.15696659507997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14de1a431c0b1493%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2s!4v1525094860862"  frameborder="0" style="border:0" allowfullscreen/>
                        </p>
                    </div>
                </section>
            </div>

        </div>

        <div class="col-lg-6">
            <div class="footer-top-box wow fadeInUp">
                <section id="text-22" class="widget widget_text">
                    <h4 class="widget-title">Πολιτικές</h4>
                    <div class="textwidget">
                        <p>
                            <font color="#FFFFFF">
                            </p>
                            <ol>
                                <li>
                                    <a href="https://apostolosloukas.org/privacy-policy/">
                                        <font color="#FFFFFF">Πολιτική Απορρήτου</font>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://apostolosloukas.org/cookie-policy/">
                                        <font color="#FFFFFF">Πολιτική Cookies</font>
                                    </a>
                                </li>
                            </ol>
                            <p>
                            </font>
                        </p>
                    </div>
                </section>
            </div>

        </div>

    </div>
</div>

I’m using bootstrap.min.js ver 4.5.2.

I need to increase the width of section id text-6 and decrease the width of section id text-22.

When I’m using the following ccs code, the width of both columns changes.

.footer-top-box  {
    width: 120%;
}

Any help please?

>Solution :

The classes col-lg-6 imply taking 6 of 12 columns above the large breakpoint. You can simply change them according to the Bootstrap grid strategy. Here I’ve switched to the small breakpoint and added color for better demonstration.

Other tips:

Iframes and lists shouldn’t be inside paragraphs. The WordPress editor may have done that, but they can be switched to divs. Paragraphs can only contain "phrasing" content.
Paragraphs shouldn’t be used for spacing. There are several here with no content. Use margin or padding instead. Bootstrap has spacing classes for that.

/* styles for demonstration purposes */

.row>div {
  background: pink;
}

.row>div:last-child {
  background: #bbb;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="footer-top-box wow fadeInUp">
        <section id="text-6" class="widget widget_text">
          <div class="textwidget">
            <p>
              Iframe here (inappropriately inside a paragraph).
            </p>
          </div>
        </section>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="footer-top-box wow fadeInUp">
        <section id="text-22" class="widget widget_text">
          <h4 class="widget-title">Πολιτικές</h4>
          <div class="textwidget">
            <p>
              <font color="#FFFFFF">
            </p>
            <ol>
              <li>
                <a href="https://apostolosloukas.org/privacy-policy/">
                  <font color="#FFFFFF">Πολιτική Απορρήτου</font>
                </a>
              </li>
              <li>
                <a href="https://apostolosloukas.org/cookie-policy/">
                  <font color="#FFFFFF">Πολιτική Cookies</font>
                </a>
              </li>
            </ol>
            <p>
              </font>
            </p>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>