Utilizing Flexbox for a standalone section

I have a specific section in my HTML where I want to utilize flexboxes. The CSS provided is affecting all other rows and columns in my code. How can I ensure that this CSS only impacts the specific HTML section I have included here?

Thank you!

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
        <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapflexboxcss-selectors

Answer №1

Utilize the selectors .bestseller-wrap .row and 

.bestseller-wrap .row>[class*='col-']
to exclusively target the rows and columns within this specific element.

If necessary, you can associate it with the section itself by adding a class to the section in the HTML and using that class instead of .bestseller-wrap

.bestseller-wrap .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.bestseller-wrap .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>This is a main heading</h3>
        <input type="submit" value="Sign Up">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

Answer №2

Simply include a class!

.section-content .grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.section-content .grid>[class*='col-'] {
   display: flex;
   flex-direction: column;
}
<div class="section section-content">
  <div class="content-wrap">
    <div class="grid">
      <div class="col-sm-3" style="background-color: teal;">
        <h3>This is a title</h3>
         <input type="submit" value="Join now">
      </div>
      <div class="col-sm-9">
        <img src="/img/sample.jpg">
      </div>
    </div>
  </div>
</div>

<div class="grid">
  <h5>Another grid</h5>
</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

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Currently, I am in the process of developing my own unique version of a platform similar to using Electron technology. The objective for this app is to provide users with the ability to view multiple URLs simultaneously, such as and , through a tabbed i ...

javascripthtmlnode.jselectron

Instructions on how to delete a specific tag from a table using its ID

I have a complex HTML table generated by a PHP loop with multiple rows. My goal is to eliminate all the a tags within the td tag where the ID of the td tag is equal to 1 or another specified value. <table> <tr> <td>ID: 1</ ...

javascriptjqueryhtml

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

htmlcss

The exact problem with aligning the table

Below is a simplified version of my code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body style="font-size: 36px"> </body> </html> <html> ...

htmlcsshtml-table

Design a stylish table using the format from the specified file

Currently, my goal is to generate a table using data from a csv file. The csv file contains three pre-filtered fields to avoid any issues. However, when I execute the code, no output is generated in the report file. I suspect there may be an error while pr ...

htmllinuxbashcsvawk

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

Currently, I am facing a challenge with a large map image (3000x8000px) in .png format that I have converted to .svg for data visualization purposes. I am struggling to find a way to display a specific small section of this map.svg file on an HTML page u ...

jqueryhtmlcsssvgangularjs-directive

IE causing Ul LI Menu to not display as Block

I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu. I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not ...

htmlcssinternet-explorerhtml-lists

Different text in AMP

Is there a way to make a line of text quickly fade in, stay visible for 5 seconds, fade out quickly, then have a different line of text quickly fade in, stay for about 5 seconds, fade out quickly, and repeat this process infinitely in AMP? I tried using ...

htmljsonamp-htmlalternatingamp-animation

Tips for displaying the webpage background above a specific div by utilizing a differently shaped div

I designed a webpage with a background image. At the top, I placed a div element (let's call it div_1) set to 50% width which creates a horizontal black bar with 60% opacity. Directly above that, towards the left at 50%, I want another div element (di ...

htmlcss

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

Can Vue.js import both element-ui and Bootstrap components?

After importing element-ui components, I realized that I also need some common styles such as reset.css and others from Bootstrap. I am wondering if these two can coexist in the same project without causing conflicts? ...

twitter-bootstrapvue.jsvuejs2vue-componentbootstrap-4

Can multiple bootstrap classes be merged together?

Using various bootstrap classes multiple times within an HTML <form>. Example: <form id="frmData" name="frmData" method="POST"> <div class="row justify-content-sm-center mb-2 align-items-center"> ...

htmlbootstrap-5

How to retrieve the width of an unspecified element using JavaScript

Seeking help with a div element that adjusts its size based on the elements it contains. How can I determine the final size of this dynamic div without checking the sizes of its internal elements? I've attempted to parse all the properties of the obj ...

javascriptjquerycssdimensions

Setting up a specific print media query for the body element through JavaScript

I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...

javascriptjquerycssmedia-queries

Avoid vertical clipping issues by utilizing the overflow-y property

I am working on a horizontal navigation menu with two levels; the second level is displayed vertically. The number of items in the second level can vary, sometimes causing the list to extend beyond the browser view. To address this issue, I have used overf ...

htmlcss

What is the best way to include a secondary border to a responsive textarea?

Currently, I am utilizing Twitter Bootstrap 3.2.0 and below is the code snippet: Click here for jsFiddle .textarea textarea { background-color: white; background-image: url("http://ello.96.lt/images/as.jpg"); line-height: 1.56em; p ...

twitter-bootstrapcss

Is there a way to prevent inheriting width properties? Or perhaps how can one revert back to the original width value

After installing the Thank you plugin, I noticed that the button on my test site appears to be strange. Upon further investigation, I discovered that it is inheriting #commentform textarea { width: 45%; } from my theme. While removing the width in the CSS ...

cssinheritance