What could be causing this Bootstrap column to misbehave?

Why is the content stacking within each list item instead of being on the same line? I've attempted using floating and adjusting the position, but nothing seems to be working. How can I resolve this issue?

.icon-left{
    float:left;
    padding: 12px 25px 60px 15px;
    color:#4ECABE;
}
.text{
    text-align:left;
    padding:0 0 0 15px;
}
.text h4{
    padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="icon-left">
              <i class="fa fa-ticket fa-3x"></i>
            </div>
            <div class="text">
                <h4>Get Free Books</h4>
               <p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
            </div> <br>
            <div class="icon-left" id='smile'>
              <i class="fa fa-smile-o fa-3x"></i>
            </div>
            <div class="text2">
            <h4>New Books Every 6 Hours</h4>
               <p>That's right, you only have 6 hours to get entries for a book.</p>
            </div> <br>
            <div class="icon-left">
              <i class="fa fa-truck fa-3x"></i>
            </div>
            <div class="text">
            <h4>Absolutely free!</h4>
               <p>We even pay shipping.</p>
            </div>
        </div>

csstwitter-bootstrap

Answer №1

To fix the floating issue, you have a couple of options. You can add br { clear: both; } to your current markup, or a more efficient way is to utilize bootstrap by enclosing the .icon-left and .text elements within an element that has the .clearfix class.

.icon-left{
    float:left;
    padding: 12px 25px 60px 15px;
    color:#4ECABE;
}
.text{
    text-align:left;
    padding:0 0 0 15px;
}
.text h4{
    padding-bottom:5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
  <div class="clearfix">
    <div class="icon-left">
      <i class="fa fa-ticket fa-3x"></i>
    </div>
    <div class="text">
      <h4>Get Free Books</h4>
      <p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
    </div>
  </div>
  <div class="clearfix">
    <div class="icon-left" id='smile'>
      <i class="fa fa-smile-o fa-3x"></i>
    </div>
    <div class="text2">
      <h4>New Books Every 6 Hours</h4>
      <p>That's right, you only have 6 hours to get entries for a book.</p>
    </div>
  </div>
  <div class="clearfix">
    <div class="icon-left">
      <i class="fa fa-truck fa-3x"></i>
    </div>
    <div class="text">
      <h4>Absolutely free!</h4>
      <p>We even pay shipping.</p>
    </div>
  </div>
</div>

Answer №2

To enhance your .icon-left divs, consider giving them a vibrant background color like gold using background: gold. This will make them stand out and be more noticeable. The excessive bottom padding may be causing the elements on the right to shift and disrupt the layout.

You can resolve this issue by reducing the padding on .icon-left to something like padding: 12px 25px 24px 15px;. This adjustment should realign everything properly on the page.

As an extra tip, remember to include the fa-fw class in your Font Awesome icons. This will ensure that your icons are displayed with a fixed width, allowing your text to align perfectly alongside them.

Answer №3

There seems to be some extra padding on the left side of the icon.

Have you tried adjusting the padding values to: 12px top, 25px right, 25px bottom, and 15px left?

I recommend wrapping each section with a div element and applying a grid class col-lg-3. This will help reduce the excessive padding and give you more control over your user interface design.

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

Retrieving CSS file using admin-ajax.php in WordPress

The website has been tested on GTmetrix and you can view the report here I am puzzled as to why admin-ajax.php is causing a delay of over 3 seconds in loading time on this particular page that I am attempting to optimize. It seems to be related to a CSS ...

phpcssajaxwordpressadmin-ajax

Modifying the chart width in Chart.js: A step-by-step guide

After creating a chart using Chart Js, I encountered an issue where the chart did not fit within the specified width. Adjusting the attributes of canvas proved to be ineffective, specifically with regards to the width attribute. Despite changing the value, ...

javascripthtmlcsschartschart.js

The drop-down menu keeps flickering instead of remaining open when clicked

I am facing an issue with a dropdown menu in my webpage. The menu is initially hidden, but should become visible when the list element containing it is clicked. I have written JavaScript code to add a class that changes the visibility property to visible u ...

javascripthtmljquerycss

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

"The search returned no results" is not shown in the "bootstrap-table" interface

I have integrated the "bootstrap-table"(https://github.com/wenzhixin/bootstrap-table) plugin into my website and configured it to utilize server-side pagination. The table is successfully populated with data, and the search functionality is also operation ...

phpjsontwitter-bootstrapbootstrap-table

AngularJS does not update values properly if there is a style applied to the parent container

I'm struggling to find the best approach to handle this situation. This is how my AngularJS code looks: <span class="something" ng-hide="onsomecondition"> {{value}} </span> .something{ text-align:left; padding:10px;} Issue: The value ...

javascriptcssangularjs

Enhance Material-UI's SwipeableDrawer by incorporating a clickable handle

Is there a way to include a clickable handle in a material ui SwipeableDrawer? Something similar to what's shown on Google Maps here: Google Maps button.css position: absolute; top: 100px; left: -50px; width: 50px; height: 100px; z-index: 10000; // ...

cssmaterial-ui

What could be the reason for the datepicker popup failing to appear?

I am currently working on developing a custom bootstrap datepicker directive: app.directive('datePicker', function ($compile, $timeout) { return { replace: true, restrict:'E', templateUrl: 'datepicker.h ...

angularjstwitter-bootstrapdatepicker

CSS - Nesting classes within one another

I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the u ...

htmlcss

Add the cordova plugin multi-image-picker with the following command

onDeviceReady: function() { window.imagePicker.getPictures( function(results) { for (var i = 0; i < results.length; i++) { alert('Image URI: ' + results[i]); } }, function ...

htmlcssangularjscordova

Can someone tell me where I can locate the CSS file once I've finished using Scene Builder?

Currently, I am working on my database project using Scene Builder. I have applied some CSS styling and would like to locate the CSS file in order to attach it to my IntelliJ project for further code editing. Can anyone guide me on where to find the CSS ...

cssjavafxscenebuilder

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Here is the structure of my HTML (at the top): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s ...

javascriptjqueryhtmlcssmobile

Eliminate error class in jQuery Validate once validation is successful

I'm having an issue with the jQuery Validate plugin. Even after a field is successfully validated, the "error-message box" continues to be displayed. How can I remove this box? Here's my code: CSS: .register-box .field .has-error{ border ...

javascriptjqueryhtmlcssjquery-validate

Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...

javascriptjquerycsscypress

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

jquerycss

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

javascriptjquerycssinternet-explorer

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Here is a code snippet I'm using to switch between classes for buttons: $('button').on('click', function(){ var btn=$(this); if(btn.attr('class')=='tct-button'){ btn.removeClass('tct-button ...

javascriptjqueryhtmlcss

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen