What could be causing the col-md class to not work within a Bootstrap 4 card element?

Please be aware that I specialize in development, not design.

My goal is to split a card div into two columns for desktop view. The text "This should be in Left Side" should be positioned on the left side, while "This should be on right side" should be on the right side.

Here is the HTML code I am currently using:

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>

  </div>
</div>

If you would like to test it online, you can visit the jsfiddle here.

Can you help me identify my mistake and suggest a correction?

csstwitter-bootstrapbootstrap-4

Answer №1

Using the col-* classes will only work if they are nested under the row class. Below is the updated code snippet for the card-block division. I hope this code helps clarify things for you.

<div class="card-block">
  <div class="row">
    <div class="col-md-4">
      Content for the left side
    </div>
    <div class="col-md-8">
      Content for the right side
    </div>
  </div>
</div>

Answer №2

<div class="row card-block">
    <div class="col-md-4">
      Content positioned on the left side
    </div>
    <div class="col-md-8">
      Content positioned on the right side
    </div>
</div>

This setup will suit your requirements.

Answer №3

Encountering a similar issue when trying to add a Form within a Card in Bootstrap. Here is my approach:

Starting with the original Bootstrap standard form implementation:

<form action="/action_page.php">
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>

To ensure it works correctly, I had to adjust it as follows:

<form action="/action_page.php">
<div class="row">
  <label for="email" class="col-md-2">Email:</label>
  <input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>  
</form>

In order for the form to function properly within a Bootstrap card, I needed to change the class from form-group to row.

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

Exploring the varying heights of select options in HTML5 and Bootstrap Select

I am encountering an issue with the height of a button element generated by Bootstrap Select within an HTML select element. When using HTML5 and including the declaration as the first line, the button renders correctly with a height of 24. However, when ...

csshtmlbootstrap-4bootstrap-selectpicker

Steps to resolve transition zoom issues with images

I'm having trouble showcasing blog posts with an image. Currently, I am utilizing card-columns from Bootstrap 4, and when the user hovers over the image, it scales up. The issue arises when the transition occurs, as my border radius resets to defaul ...

twitter-bootstrapcssbootstrap-4

Hover and focus effects of the main navigation menu in Semantic UI CSS

I seem to be having trouble styling my navbar with semantic-ui. I want to make changes to the color and background-color on hover and when focused. However, no matter what I try, the hover effect just won't work. I was only able to achieve it using jQ ...

javascriptjqueryhtmlcsssemantic-ui

Troubleshooting issue with image dimensions in Angular within CKEditor content

One issue I am facing is with CKEditor, where images inserted into Rich Text Fields have their height and width attributes set in a CSS style tag. For example: <img alt="" src="https://something.cloudfront.net/something.jpg" style="height:402px; ...

htmlcssangularckeditor

Changing the background image within a CSS class on an imported Vue component

Is there a way to dynamically change the background-image on a CSS class within an imported component? I have successfully installed 'vue-range-slider' and imported RangeSlider. The setup for the range-slider is as follows: <template> ...

cssvue.js

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...

htmlcssflexbox

How can I create a custom elevation for a Vuetify v-menu?

I'm currently working with vuetify and v-menu as outlined in the official documentation here https://vuetifyjs.com/en/components/menus/ I'm struggling to figure out how to apply elevation only on the bottom left and right corners. When I add a ...

cssvue.jsvuetify.js

Adjusting the appearance of a JavaScript element based on its hierarchy level

Currently, I am utilizing Jqtree to create a drag and drop tree structure. My main goal is to customize the appearance of the tree based on different node levels. Javascript Tree Structure var data = [ { name: 'node1', id: 1, chi ...

javascripthtmlcssjqtree

Eliminate the link outline in p:tabView

How can the outline be removed when a user clicks on one of the tabs in <p:tabView>? Attempts to set it in CSS were unsuccessful. a { outline: 0 none !important; } Shown below is a screenshot of the issue. ...

cssjsfprimefaces

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go. Below is a sample code with only one row in ...

htmlcsscss-float

How to align two <select> elements side by side using Bootstrap

The issue I am encountering is that these two select elements within the same control-group are being displayed vertically when I want them to be displayed horizontally. I attempted using inline-block in CSS, but there are other <div> elements with ...

javascripttwitter-bootstrap

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

What is the best way to allow a number to be editable when clicked on in a React application

Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface. https://i.stack.im ...

javascriptcssreactjs

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

javascriptjqueryhtmlcssowl-carousel

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

javascriptcssreactjs

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, a ...

javascriptcsssizescreen

The DIV is only partially concealed by the box shadow

I'm having an issue with the Box Shadow css style I've applied. It seems to only cover a small portion at the top of the mainContent DIV, leaving the rest without any shadow. Can anyone help me figure out what I might be doing wrong? .mainConten ...

css

Elements on the page appear and disappear as you scroll down

Whenever my scroll reaches the bottom of element B, I want my hidden sticky element to appear. And when I scroll back up to the top of element B, the sticky element should be hidden again. Here are my codes: https://i.sstatic.net/J49dT.jpg HTML <htm ...

javascriptjqueryhtmlcss

Is there a glitch causing the Owl carousel to malfunction?

I am struggling to implement a fullwidth owl carousel slider on my webpage, but I'm facing issues with getting it to function properly. I suspect there might be a conflict with the current template that I'm using. Here is the step-by-step proce ...

javascriptjqueryhtmlcss

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

htmlcss