Modifying Bootstrap Grid Layouts

I need to reorganize the columns for better responsiveness as the current order is not ideal.

Below is the code snippet:

  <div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
  <div class="container">
    <div class="row">
      <div class="col clienti">
        <h4><font color="green">1.</font> Sign up on the platform<br>  Create an account</h4><br>
        <h4><font color="green">3.</font> Receive offers upon request.<br></h4><p>Relax, you will be notified every time<br>you receive a new offer.</p><br>
        <h4><font color="green">5.</font> Wait for your offer to be accepted by<br>the merchant.</h4><br>
      </div>
      <div class="col clienti">
        <h4><font color="green">2.</font> Upload a new request.</h4><br><br>
        <h4><font color="green">4.</font> Accept the offer that fits your needs.<br></h4><f><br><br><br>
        <h4><font color="green">6.</font> Choose the payment method and pickup location<br>for your parcel.</h4><br>
      </div>
    </div>
</div>
</div>
<div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>

The current order in responsive mode is 1,3,5,2,4,6. How can I change it to 1,2,3,4,5,6 for better responsiveness while maintaining the same style in normal mode?

Thank you!

htmlcssbootstrap-4

Answer №1

If you want to split the width in half, you can utilize the "col-6" class. Here's an example:

<div class="row">
  <div class="col-md-6"><h4>1. Content</h4></div>
  <div class="col-md-6"><h4>2. Content</h4></div>
  <div class="col-md-6"><h4>3. Content</h4></div>
  <div class="col-md-6"><h4>4. Content</h4></div>
  <div class="col-md-6"><h4>5. Content</h4></div>
  <div class="col-md-6"><h4>6. Content</h4></div>
</div>

I've used col-md-6 in this example to create two columns on medium or larger screens. To add spacing, consider using classes like "p-md-3". Be sure to refer to Bootstrap's documentation for more details!

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

Utilizing Bootstrap to create a responsive design with a full-height view on the body,

While adjusting the page width in Chrome dev tools, I noticed that the page also increases vertically. It appears that Bootstrap is assuming a viewport height larger than what it actually is. Here is the relevant code snippet: <!DOCTYPE html> <ht ...

htmlcssflexboxbootstrap-5dynamic-resizing

Using jQuery to dynamically insert variables into CSS styles

I am attempting to use jQuery 3 to modify the CSS of a class and change the background color. My first step is converting an rgba color code (properties.color) to a hexadecimal code, which is functioning correctly. Next, I try to change the background co ...

javascriptjquerycss

How to modify the styling of an input element in React without directly manipulating the input itself

I have collected responses from a survey I created and now I want to showcase the results. The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot. Each number should be presented within a square, with ...

cssreactjsinput

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

I am facing challenges in retrieving the accurate data for display from Mat-Select and Mat-Checkbox components. My goal is to capture the selected values from users and perform if-else statements to validate conditions, displaying the correct data view if ...

javascripthtmlangularangular-material

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins. Check it out here: http://24.125.42.135/ When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This ...

javascriptjqueryhtmlcss

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

What could be causing the unexpected text display in my shiny app despite using html tags and bootstrap?

Here is a simple example that illustrates the error I am experiencing: library(shiny) run_with_enter <- ' $(function() { var $els = $("[data-proxy-click]"); $.each( $els, function(idx, el) { var $el = $(el); var $proxy = $("#" + $el.data("proxyCl ...

javascriptrshinybootstrap-4shinyjs

Experience seamless video playback on both mobile and web browsers with JW Player

I have integrated the JW Player for video playback on both mobile and web browsers. Currently, I have a library of 100 videos with dimensions set at 1280*700 pixels. These videos work well on web browsers and load quickly depending on internet speed. Howe ...

jqueryhtmlflashjwplayer

When it comes to the CSS `:visited` pseudo-class, I have

I'm having trouble changing the color of the anchor tag and blurring the image after visiting the link. Despite my CSS code, only the color is changing and the image remains unchanged. Here's my CSS code: <style> .image123{ paddin ...

javascriptjqueryhtmlcss

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

jquerycsshtmlresize

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

javascriptjqueryhtmlcss

Pass the input field value from a Bootstrap navbar to a CodeIgniter controller

Here is the code snippet I am working with: <form class="form-inline my-2 my-lg-0"> <?php echo form_open('users/modificaAzienda2'); ?> <input type="hidden" name="usernameHidd ...

twitter-bootstrapcodeigniterpostbootstrap-4codeigniter-3

Tap the image to open it in a new window for a closer look

After retrieving data from the database, which includes images and other fields, I am trying to figure out how to make it so that when users click on an image, it opens in a new window. Below is the code snippet I have: <a target="_blank" href="#"> ...

htmlcss

Utilizing JavaScript to dynamically resize an element within a slide as soon as the slider transitions to the following slide

RESOLVED! ISSUE FIXED! While working on my personal website using WordPress and the Smart Slider 3 plugin, I encountered a problem with the positioning and size of an element in the second slide. Despite finding a tutorial explaining how to manually trigg ...

javascripthtmljquerywordpress

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

What is the best way to consistently update the name of a variable in PHP?

Forgive me in advance if my question seems a bit confusing. I currently have three separate PHP files. The first one prompts the user to select the quantity of products they want (between 1-20) using a variable called $quantity. Once a number is chosen fr ...

phphtml