Having difficulty achieving the desired style with columns and four divs per column as the styling is not coming together as expected

I am currently having trouble displaying these articles vertically (stacked on top of each other) with 4 divs per column in the main section. I am unable to make them the same size or have all of them display the articles stacked one on top of the other. Some are still appearing side by side. I can't seem to figure out what to do.

<div class="indexNPrt2Mid">
  <div class="row flex-wrap">
    <div class="col-lg-6 flex-first">

      <div class="indexNPrt2MidSlider">
        <div class="ylwTpBx wlwTpBx clearfix pointer">
          <h3 (click)="navigateToArticles(19)">Daily Fantasy Basketball<span><img src="../../../../assets/images/blkArow.png"></span></h3>
          <p><img src="../../../../assets/images/basketball.png" alt="" class="img-responsive"></p>
        </div>
        <div class="owl-carousel owl-theme midSlider midSlider1">
          <!-- Article content here -->
        </div>
      </div>

    </div>

    <!-- Repeat similar structure for other sports -->

  </div>
</div>

This is my code snippet where the parent div (indexNPrt2Mid) is meant to be centered on the page with two columns containing a total of 8 child divs, each with a height and width set equally and showing three articles stacked. However, there seems to be an issue that I cannot pinpoint.

Below is the CSS:

.news-notes {
/* text-align: justify; */
}
.body {
width: 100%;
}

.indexNPrt2MidSlider{
height: 25%;

}

.indexNPrt2Mid {
columns: 2;

}


.social-feed-img {
height: auto;
width: 100%;
}

.news-item {
border-top: 1px solid #eee;
}

.news-item:first-child {
border-top: none;
}

.pointer {
cursor: pointer;
}


.TopText {
margin-top: -5em;
font-size: 2em;
color: white;
}
.TopText div {
font-size: 3em;
}
.TopText h1 {
font-size: 2em;
color: white;
 }

#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}

#myBtn:hover {
background-color: #555;
}
.backToTopButton.visible {
opacity: 1;
visibility: visible;
}

/* Other CSS rules omitted for brevity */
javascripthtmlcssangularbootstrap-4

Answer №1

If you adjust the size of the layout, it will automatically stack vertically on top of each other.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest CSS styling from Bootstrap framework -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest JavaScript files from Bootstrap framework -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid red; width:100%; height: 50vh;">
   <div class="row">
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
      </div>
   </div>
  </div>
   <div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid green; width:100%; height: 50vh;">

   </div>
    <div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid blue; width:100%; height: 50vh;">
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12" style="border: 1px solid orange; width:100%; height: 50vh;">
    <div class="row">
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
      </div>
      <div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
      </div>
   </div>
</div>
</body>
</html>

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

The significance of Buffer in node.js

I see the importance of using Buffer, but I'm a bit unclear on how to properly use buffer syntax. In the example provided below, const parsedBody = Buffer.concat(body).toString(); const message = parsedBody.split('=')[1]; ...

javascriptnode.js

Generating safe HTML output in PHP requires adding 4 spaces before the code

I'm currently designing a form that generates basic HTML and other plain text output for users to copy and paste into a content management system. For setting up the variables, I follow this structure: $date1 = $_POST['date1']; $city1 = $_ ...

phphtml

"Dealing with the postback problem on a single page website with an ASP

I'm encountering an issue on my One page website with different sections. The second section includes a grid view that allows inline editing. Problem: Whenever the OnClick method is triggered, it causes a postback and the page automatically scrolls ...

javascriptc#asp.netgridviewpostback

Modifications made to Angular 7 templates are not appearing in MVC 5

Currently, I am utilizing Angular 7 with MVC5 in Visual Studio 2019. However, I have encountered an issue while trying to render the Angular template in my index.cshtml file. I access the Angular template in index.cshtml using ``. The template loads perfec ...

c#asp.net-mvcangularangular7

The AngularJS promise is not resolving before the external Braintree.js script finishes loading after the HTML content has been fully

Using an external braintree.js script is necessary to generate a payment widget, and unfortunately I have no control over it. The code that needs to be included in my .html page is as follows: <div id="myClient" ng-show="false">{{myClientToken}}&l ...

javascriptangularjsbraintree

Initiating external libraries at the right time in Angular 4

I am currently experimenting with a UI kit (you can check it out here) that comes with multiple JavaScript files, jQuery, Bootstrap, and its own components. I have included them in my index.html file and everything works perfectly as long as the checkbox ...

javascriptjqueryhtmltwitter-bootstrapangular

What is the best approach to testing a function that relies on a reference to Firebase?

I am currently trying to write unit tests for a function within my application that interacts with Firebase, specifically by calling and updating a reference. However, I have encountered an issue while attempting to run the test - upon importing the file c ...

javascriptnode.jsfirebasewebpackbabeljs

Specify touch event regions with the ngTouch directive

I recently implemented ngTouch in my AngularJs web app to detect swipe left and right gestures. I am using this feature to open and close a side bar menu. Currently, the swipe events are linked to the entire wrapper like this <div ng-style="body_st ...

javascripthtmlangularjstouchangularjs-ng-touch

Illustration next to content featuring a heading and a paragraph

I've been working on a website design and trying to position text next to an image. It seems like a simple task, but I'm struggling to make it work. Here's an illustration of how I want the layout to look: So far, here is the HTML code I&a ...

htmlcss

What steps can I take to ensure the footer remains fixed at the bottom of the webpage?

I am facing a challenge with my footer component as it is currently being displayed at the end of another component. I want to ensure that it remains anchored at the bottom of the page regardless of the other components present. In addition to the footer ...

angular

Troubleshooting disappearing values in POST request using ajax and jQuery serialize() method

When I make a post request, I am only able to retrieve two out of four values. I am expecting to get the id, step, name, and email from the form but the only ones I receive are from the hidden inputs. It seems like the jQuery serialize() function might be ...

javascriptphpjqueryajaxpost

Error message: The variable GLOBAL is not defined in the fetch-mock code

I am currently using fetch-mock to write unit tests for functions that utilize isomorphic-fetch. Below is a sample of the test suite I have created: import connect from '../../src/utils/connect'; import fetchMock from 'fetch-mock'; ...

javascriptunit-testingreactjses6-promisejestjs

Issue with THREE.js: Object picking does not display the parent object name when an object is loaded using OBJMTLLoader

I successfully loaded an OBJ file along with MTL file textures using OBJMTLLoader. The code I used was borrowed from . The primary object, a man in a business suit with hair, hands, and shoes, is displayed correctly with all the textures applied, such as ...

javascriptthree.js.obj

Switch out the URL in npm's build process

While developing, I am using a mock REST service but for the public release, I intend to switch to a real backend. Is there a method to update the endpoint URL during the npm build process? ...

javascriptrestnpmmockingrelease

Is there a different approach to coding this using .attr in Jquery?

I was trying to rewrite the following line: $('a').filter('[hash=' + inview + ']'); to something similar to this: $('a').attr(href, inview); with var inview = yada yada yada defined above. Or is there another me ...

javascriptjqueryhashhref

Error: The call stack has reached the maximum size limit in nodejs and reactjs

When I attempt to submit the token received from my registration using the code snippet below, I encounter an error stating "maximum call stack exceeded." exports.activationController = (req, res) => { const { token } = req.body; exports.activation ...

javascriptnode.jsreactjsexpressmongoose

Issues with CKEditor's failure to save content in utf-8 character encoding

Let me explain my situation concisely. I'm encountering an issue with my PHP project that I can't seem to resolve. The problem arises when I try to update the content using CKEditor on my website. Below is the configuration and instance of CKEdi ...

phphtmlmysqlutf-8ckeditor

Dynamic starting point iteration in javascript

I'm currently working on a logic that involves looping and logging custom starting point indexes based on specific conditions. For instance, if the current index is not 0, the count will increment. Here is a sample array data: const data = [ { ...

javascripttypescriptecmascript-6

Utilize PHP SVG images to trigger internal JavaScript code through the <img> tag

Here is a php function that generates an SVG image. public function actionJsTest() { header('Content-Type: image/svg+xml'); $svg = ''; $svg .= '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/ ...

javascriptphphtmlsecuritysvg

The data-toggle function is not functioning properly with the code provided

Could someone shed some light on why my tabs and navigation bar dropdown button are not functioning properly? <div class="col-12"> <h2>Corporate Leadership</h2> <ul class = "nav nav-tabs&q ...

htmlcssbootstrap-4tabsreact-bootstrap