Which is more advantageous for creating a new block in Bootstrap 4 – using ".row" or ".col-12"? And what is the reasoning behind your choice?

Here is a simple example to demonstrate.

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

    <form class="col-12 form-group">
      // some code
    </form>

    <div class="col-12">
      // some text for description
    </div>

  </div>
</div>

In the code above, the columns are in the same row but can be separated like this:

<div class="container">

  <div class="row">
    <form class="col-12 form-group">
      // some code
    </form>
  </div>

  <div class="row">
    <div class="col-12">
      // some text for description
    </div>
  </div>

</div>

Will there be any difference?

htmlcssbootstrap-4

Answer №1

A distinction arises when the elements belong to different flex containers. This distinction becomes more apparent when additional properties are introduced:

Consider the following example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row flex-column-reverse">

    <form class="col-12 form-group">
      one
    </form>

    <div class="col-12">
      two
    </div>

  </div>
</div>

<div class="container">

  <div class="row flex-column-reverse">
    <form class="col-12 form-group">
      one
    </form>
  </div>

  <div class="row flex-column-reverse">
    <div class="col-12">
      two
    </div>
  </div>

</div>

In the second scenario, the use of flex-column-reverse cannot alter the order of the elements.

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

Is there a way to position the text within an email body at the center using SendGrid?

I've been working on creating an email newsletter template using SendGrid, and I've run into a formatting issue where the content doesn't align properly in the email body. The image below shows how it's appearing incorrectly. Does anyon ...

htmlcsssendgrid

Determine the row index by identifying the row id and table id

I need to retrieve the Index number of a row when a hyperlink is clicked, while also passing additional data from this tag. <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"&g ...

javascripthtml

What are the best methods to prevent infinity printing?

While attempting to create a clock that displays time in real-time after adding a time zone, I encountered an issue where the time was being printed multiple times. My objective is to have it printed once and dynamically change according to the different t ...

javascripthtmlapi

How can TypeScript be used to update the values and text of an HTML element?

Is it possible to update specific attributes of an html element using typescript? Below is the code snippet: HTML:- <a ref="#" id="userProfileName" style="padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left ...

htmltypescript

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...

javascripthtmlcssreactjsfont-awesome

Synchronize two slideshows in a cycle with timed delays between each cycle

Is there a way to add a sequential delay between slideshows in the synchronized slide show example from cycle2 API? For example, having each div.cycle-slideshow start at 5s intervals (5s, 10s, 15s, 20s...). The cycle would then repeat with the first div st ...

javascriptjqueryhtmlcssjquery-cycle2

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

htmlcsscss-position

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

Tips for generating an ordered list that begins with 01

Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...

cssruby-on-railssassslim-lang

"Revealing the specific row and column of the selected element in each table when hovering over it

On my webpage, I have set up two tables positioned side by side like this: <!DOCTYPE html> <table> <tr> <td> <table> <tr><td>1</td><td>2& ...

jqueryhtmlcsshtml-tablehover

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

JavaScript causing values to disappear when the page refreshes

When a user hovers over ImageButtons, I use Javascript to change the ImageUrl. However, on submitting the form, the updated ImageUrl property is not reflected in the code behind. Similarly, I also dynamically update a span tag using Javascript, but its alt ...

javascriptjqueryhtmlasp.netvb.net

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

What is the best way to use CSS to evenly lay out a group of dynamically generated buttons?

My Vue-generated buttons need to be evenly laid out on the bottom of the page, with equal space on the left and right. The mdui button style I am using has fixed width and height, so I have to decide between a single row for fewer buttons (less than three ...

cssvue.js

CSS - Overlapping <a> elements when resized

My buttons have the following properties: background: #c6cdf2; border: 1px solid #8896e4; border-radius: 3px; padding: 6px 10px 3px 10px; When the page resizes, the buttons don't respect the padding and start overlapping each other. https://i.sstat ...

htmlcssresponsive-design

How to keep the Bootstrap column in place while making it fixed

I'm struggling to make the second column (yellow part) stay fixed in position. I've tried using CSS position:fixed, but the column keeps shifting to the left. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/cs ...

csstwitter-bootstrapbootstrap-4

hiding form fields using javascript

As a beginner in javascript, I am facing a challenge with a set of checkboxes in an HTML form. These checkboxes are generated dynamically from a python script. Among them, there is a checkbox labeled "N/A" that I want to hide automatically when any other c ...

javascriptpythonhtmlforms

Ways to incorporate ng-app into an HTML element when HTML access is limited

In my current project, I am using Angular.js within a template system. The challenge I am facing is that I need to add ng-app to the html element, but I do not have direct access to do this on the page itself. Initially, my page structure looks like this: ...

javascriptjqueryhtmlangularjs

Image tinting color picker tool (using HTML, CSS, and web technologies)

I'm currently exploring ways to apply a filter or tint on top of an image using CSS/HTML or some lightweight solution. For example, Ideally, my goal is to only have one image displayed on the page and overlay it with a transparent filter based on a ...

jqueryhtmlcsscolorspicker

Arranging div containers with nested content

Within my application, I am dynamically displaying images side by side to users. Users have the ability to assign points to these images, and I would like to give them the option to sort the images based on points, with the highest points displayed first i ...

javascriptjquerysortinghtml