I am looking to transform the col-sm-4 in Twitter Bootstrap into two equal columns, one containing an image and the other containing content, with an additional row at the bottom

Hello there! I managed to create three columns in one row, each divided into two equal sections with a footer row. Take a look at the image below for reference:

You can view the alignment sample here

Here is the code snippet:

<div class="container">    
      <div class="row>
        <div class="col-sm-4">
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">

            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>

          </div>
        </div>

        <div class="col-sm-4"> 
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;" >
            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_5.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>
          </div>
        </div>
        <div class="col-sm-4"> 
          <div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">
            <div class="panel-heading">BLACK FRIDAY DEAL</div>
            <div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
            <div class="panel-footer">Buy 50 mobiles and get a gift card</div>
          </div>
        </div>
      </div>
    </div>
htmlcsstwitter-bootstrap

Answer №1

To split content efficiently, consider incorporating new columns within existing columns:

<div class="col-sm-4">
     <div class="row">
           <div class="col-sm-6"></div> <!-- half column of sm-4 -->
           <div class="col-sm-6"></div> <!-- half column of sm-4 -->
     </div>
</div>

Within Bootstrap framework, each column can be partitioned into 12 subdivisions with the obligatory row class.

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

Position the scrollbar on a webpage using CSS

I am trying to customize the scrollbar on my webpage by changing its position and specifying a set height, such as 400px. Currently, I can achieve this by adding padding/margin and adjusting the body's position. However, this solution disrupts the po ...

htmlcss

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss

Modify the checkbox's initial value prior to submission

I'm having a small issue. I am generating a checkbox list where the checkboxes are checked if the JSON value inside them is true and unchecked if the JSON value is false. So, if the checkbox is checked, the corresponding line of HTML looks like this: ...

javascriptjqueryhtmlcssajax

"Utilizing the Bootstrap framework to enhance the functionality

I have a bootstrap table containing data that needs to be edited, with certain fields not displayed in the table. To enable editing, I have added an edit button to each row along with a modal form. The button successfully loads the modal form without any ...

javascriptajaxtwitter-bootstrap

Ensure that outlines are visible only when navigating with the tab key using tabindex

Currently, I am working on enhancing the accessibility of my website by improving navigation using the tab button. I have implemented tabindex to manage this, but I have noticed that elements with tabindex display an outline both when clicked and when focu ...

csshyperlinkaccessibilitytabindex

What is the best way to transmit user input to a command-line application and receive the resulting output?

Creating a ".html" file where users can input query sequence and database name for outputs. The user inputs Query sequence and Name of the database. To execute a local program called "cmd application," I need to save the query sequence in a txt file and ...

htmlvbscriptcmdhta

Having difficulty formatting a div using HTML/CSS in a React application

As I embark on my journey to learn HTML/CSS, I am experimenting with different examples. Currently, I am struggling to create a div that resembles what I envision due to the content being 'glued' together. I have attempted various methods, but n ...

htmlcssreactjs

Stop the entire page from scrolling in Next JS, while still enabling individual components to scroll

My ultimate goal is to have a fixed, sticky menu bar at the top of my app, followed by a div/component that houses the remaining content and does not scroll itself, while still allowing sub-components the ability to scroll when necessary. I plan to build t ...

htmlcssnext.jstailwind-css

Relocate the HTML checkbox to the left side of its width

I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...

htmlcsscheckboxcss-floatforms

Compiling Nextjs with Tailwind typically takes anywhere from 8 to 16 seconds

My first time using tailwind has resulted in slow compilation times when used with nextjs in development mode. The slowdown can be confirmed by simply removing the following code: @tailwind base; @tailwind components; @tailwind utilities; This significan ...

cssnext.jstailwind-css

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

Utilizing jQuery to Select Check Boxes Alongside Labels

In my jQuery code, I have a simple trigger set to run when a radio button is clicked in order to check certain checkboxes on the page. <script> jQuery('#op5').click(function () { $('input[type=checkbox]'). ...

javascriptjqueryhtml

No animated scrolling occurring

I have been struggling with this problem for a while now and despite having gone through 100 questions, I still can't find a solution as to why my code snippet is failing. Here is the jQuery code I am using: $("#readmore").click(function(event){ ...

jqueryhtmlscrolljquery-animatesmooth-scrolling

Exploring HTML elements using CSS Selectors in Scrapy with Python

Currently, I am working on a personal project to create a web crawler that extracts information from Yahoo Finance. However, I have encountered an issue while trying to pull a specific value from the analysis page on Yahoo Finance. The complexity of the HT ...

pythonhtmlweb-scrapingscrapy

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Issues occur when attempting to save comments from the frontend in a Django environment

Hey there, I'm having some trouble with comments on my website. When using Class Based Views (CBV), the form is not saving the comments. Below is the code snippet from my models.py: class Product(models.Model): title = models.CharField(ma ...

javascriptpythonhtmldjangoweb

How to utilize a specific option as a variable within a PHP select dropdown menu

In my PHP code, I am retrieving data from an Azure SQL database and using it to populate a drop-down menu with options. The SQL query I used returns two columns: Title and Cycle_ID. After setting the Title as the text string and Cycle_ID as the value for ...

phphtmlsql

Is the displayed Cyrillic string in the incorrect character set?

I am facing an issue with extracting a value from a decoded JSON response obtained from a Russian API. The value within the JSON = Object268 Initially, it appeared as: Объект 268 After including <meta charset="utf-8"> in my html ...

phphtmlcharacter-encodingjson

What is the best way to add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

htmlcss

The button is not aligning with the textarea on the same row

Below is an image showing that the button is not properly aligned next to the textarea: https://i.sstatic.net/2LeXv.png Here is the HTML code snippet: <div> <form> <textarea name="comment" id="new-post" rows="2" cols="45 ...

htmlcss