The col-xl-6 in bootstrap is malfunctioning as it is not displaying the remaining portion of the content

When I use the code col-xl-6, the remaining portion stays blank and the next content displays on the next line. What could be causing this issue?

<div class="raw">
<div class="col-12 col-lg-6">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
<div class="col-12 col-lg-6">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
 </div>

    </div>
htmlcssbootstrap-4

Answer №1

row is the correct class, not raw.

<div class="row">
    <div class="col-12 col-lg-6">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
    </div>
    <div class="col-12 col-lg-6">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
    </div>
</div>

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

Align both text and images in the middle using HTML/CSS

I attempted to align an image next to text and center everything, but I'm facing some challenges. The arrow indicates where I would prefer the image to be placed. HTML <!DOCTYPE html> <head> <title>Simple Page</title> ...

htmlcss

Tips for transferring the id from the url to a php function seamlessly without causing a page refresh

I have a div that includes a button (Book it). When the button is clicked, I want to append the id of the item I clicked on to the current URL. Then, use that id to display a popup box with the details of the clicked item without refreshing the page, as it ...

javascriptphphtmljquery

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...

htmlcsswordpressresponsive-design

How to create a MySQL query within an HTML select dropdown field

For example, <select><option>Price</option></select> $sql=mysql_query("SELECT `rug_catagory_id` , `rug_price` FROM `rugs_all_data` WHERE `rug_catagory_id` =1 ...

html

Utilize JavaScript to transform today's date into a Martian date

I am trying to convert the current date on Earth to the current date on Mars using the Earth Date to Martian Solar Longitude Converter available here. The code appears to calculate the Mars date correctly, but I seem to be missing something. If anyone can ...

javascripthtmlconverters

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

htmlcss

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

What are some ways to trigger a function once the modal has finished loading?

I'm looking to trigger a function on the Bootstrap modal after it has been opened. I came across the event show.bs.modal in the documentation. I attempted to connect to the modal using this code: $('#my-modal').on('show.bs.modal' ...

jquerybootstrap-4

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

javascripthtmlangularangular-materialmaterial-design

PHP Implementing real-time dynamic categories

I am working on a project where there are multiple items listed with unique IDs. Each item has corresponding data with the same ID. I want to use JQuery, JScript, and PHP to display options based on the ID of the selected item in real-time. Below is a snip ...

javascriptphpjqueryhtmlcss

NgMap Angular Pins

While working on implementing Ng-Map for Angular in my application, I encountered an issue. I am retrieving entries from the database and attempting to drop markers on the map. However, even though I have 40 entries, only the first 11 are showing up as m ...

javascriptangularjshtmlgoogle-maps

Setting a card to the center within a col-md in Bootstrap 4: Step-by-step guide

I'm looking to position this card in the middle, not centered. How can I achieve that? I've already attempted using my-auto, but it didn't work at all. Please take a look at my code and suggest any necessary changes. Thank you! https://i.s ...

htmlcsstwitter-bootstrapbootstrap-4

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

I'm attempting to have the button with id 'testp' return an api request in json format, however it seems to not be functioning properly. You can find the HTML code link here: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-bu ...

javascripthtmlcssapi

Creating a personalized, perfectly centered container with a specific width in Twitter Bootstrap

I've been struggling with a unique challenge for the past day without success. I can't seem to figure out where I am making a mistake. My goal is to design a fixed container layout using Bootstrap, which is precisely 33em wide and horizontally c ...

csstwitter-bootstraplessmargin

Implementing smooth transitions on iPad screens with responsive text

I am currently working on a personal project that involves creating images with hover transitions. The transition effect works perfectly on all browsers except for iPads. I'm facing an issue where I can't click on the image due to the presence of ...

htmlcssipadtextcss-transitions

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps can be taken to prevent alternate scrolling text from extending beyond the boundaries of its parent element?

I'm attempting to create a scrolling effect where the text moves back and forth within its container. The current issue I'm facing is that the text goes beyond the width of the parent container before scrolling back. I want the text to smoothly s ...

htmlcss

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

csshovercss-filters

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still pl ...

javascriptcssipadhtml

When receiving a GET response after a server crash

Question: I am sending a Get request through Ajax every second and waiting for a response from the server. However, if my application crashes and I keep sending requests every second, I only receive a server timeout error (HTTP status code 502) with no oth ...

javascripthtmljqueryajax