Column Alignment Problem in Bootstrap

I'm currently working on a blog template project that resembles the design of this particular page

However, I've encountered an issue with aligning the grids in a way that meets my requirements. To showcase my problem, I have shared my version on this fiddle link https://jsfiddle.net/f74d0ngr/9/. (Please resize the output window to identify the alignment issue.)

My goal is to ensure that the latest - 2 and latest -3 posts are positioned directly under the latest -1 post.

Here is a snippet of my code:

<div id="Blog-body">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
              <p class="text-center section-head" id="The-Latest">The Latest</p>
              <img src="img/Blog1.png" alt="" class="blog-img">>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="title">Inviting Algorithms to the Design Team</h3>
          </div>

          <div class="col-lg-4">
              <p class="text-center section-head" id="The-Latest">Most Read</p>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
                   <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

          </div>
        </div>
        <div class="row">

            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">>
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>
            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">>
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>


        </div>   
      </div>
    </div>

CSS

.section-head{

  background-color: #fbef39;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px; 
}

I've attempted placing the sections in different rows without success in achieving the desired alignment. Any suggestions or solutions to resolve this issue would be greatly appreciated.

htmlcssresponsive-designbootstrap-4web-frontend

Answer №1

Your code should have the sections Latest 2 and Latest 3 wrapped in <div class="col-lg-8">, just like Latest1, but on a separate row. I made the updates to the code here: https://jsfiddle.net/zedqugms/

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

Using Angular material to display a list of items inside a <mat-cell> element for searching

Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...

cssangulartypescriptangular-material

Django auto-fill using the primary key on the page

Is there a way to automatically select the id or (pk) of an employee's page when adding documents to their profile through a form? Any suggestions for a solution would be greatly appreciated! view.py def createDocument(request): forms = documentF ...

pythonhtmldjango

implementing HtmlSpanner with an appended css stylesheet

Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...

androidcssfromhtml

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

javascripthtmlcssreactjsmaterial-ui

Chaining fade in and slide effects on a div element

I am attempting to display a <div> named settings when a button is clicked. The intention is for it to fade in and then slide towards the right side of the screen, originating from the left side. Progress so far: The HTML <div id="settings" ng- ...

cssangularjs

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

htmlcssiostext

Maximize background width with a gradient that is compatible with web-based email clients such as Outlook and Gmail

Recently, I was given the task of creating a newsletter to support cancer fundraising. Excitedly, I accepted the assignment but encountered a frustrating issue with web-based email clients (such as outlook.com and gmail.com) not accepting some of my stylin ...

htmlcssemailcompatibility

Creating and sending HTML formatted emails using Django 1.7

The function send_mail() now accepts a new parameter - html_message. Check out the official documentation for more details. I have an email.html file and I need to send an html version of my message using Django 1.7. Can someone provide me with an example ...

pythonhtmldjangoemail

Refresh the content of an iframe (local HTML) by clicking on buttons

When a user clicks on a button, I am loading an HTML file into a DIV (iframe). The issue arises when the user clicks another button and wants to reload the iframe with a different HTML file. This is the current code snippet: <script type="text/javasc ...

javascriptjqueryhtmlcssiframe

Enhancing the appearance of individual cells within an HTML table by applying custom classes

I'm in the process of automating report generation for my organization. Our workflow involves using R to summarize data from Excel, then utilizing Rmarkdown, knitr, and the "htmlTable" package to generate HTML files. Currently, I am implementing CSS ...

javascripthtmlrhtml-table

Extract CSS properties to generate a dictionary that maps class names to background images

Suppose my CSS looks like this: .featured .featured_1 { background-image: url("http://test.com/image.png"); margin-top:20px; } In that case, the following PHP function: function extractBackgroundImages($css) { if (!preg_match_all('/&bso ...

phpcssregex

Comparing functions and function issues when using onClick in JavaScript

I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...

javascripthtml

Is there a way for me to update the placeholder text in my script from "CHANGE ME

Can anyone help me troubleshoot this code that's not working on my computer? I have a paragraph with the text CHANGE ME inside an element with the id "warning". I want to update this text when the login button is clicked, but it doesn't seem to ...

javascripthtml

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

javascriptjqueryhtmlcsswidth

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element

Show content based on information from an array using JavaScript

I am currently working on developing a user-friendly step-by-step form using AngularJS and UI-router to navigate through different sections. The data collected from each form is stored in a JavaScript array, and I am trying to dynamically show or hide a di ...

javascripthtmlangularjs

Can someone explain why the min-width property is not being respected by the <input> element?

Visit this link for the code The text field in the provided link should only be 10px wide but it is currently displaying a width of 152px. Here is the code snippet: .input { width: 100%; box-sizing: border-box; } .cont { padding: 2px; } .main ...

htmlcss

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

javascriptjqueryhtmlcssangularjs

The flickering problem with HTML5 DOM

I created a HTML5 game using canvas and DOM elements, but I'm facing an issue with flickering DOM elements while playing. The problem seems to be more prevalent in mobile browsers, particularly Chrome. My game includes a full screen canvas with vario ...

javascriptjquerycsshtmldom