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

Achieve centered alignment for a website with floated elements while displaying the complete container background color

I am currently working on a website that consists of the basic elements like Container, Header, Content, and Footer. The container has a background-color that should cover the entire content of the site, including the header, content, and footer. However, ...

htmlcsscss-float

Leverage a single property from a CSS class within another CSS class

I am facing an issue where I need to utilize one property from a CSS class in another CSS class. .class_a {margin:10px; width: 360px; float: left; color:#ffffff; ...etc...} .class_b { use the margin property of .class_a } Only utilize the margin propert ...

css

What steps can I take to ensure my header appears perfectly aligned? (HTML/CSS)

My header on my website is all messed up with the links appearing incorrectly. I suspect it's an issue with style.css, so I attempted to modify the style.css file but had no luck. I have very limited experience with .css and cannot seem to figure out ...

htmlcss

The exterior DIV does not conform to shrinking dimensions

I've set the display property to inline-block, but the htmlDiv div in this code snippet is not behaving as expected. It's acting as though the inner divs are next to each other even when they're not. How can I fix this? If it's unclear ...

htmlcssposition

A guide on changing button text color in Bootstrap 4 using Sass

Is there a way to create a unique button style in Bootstrap 4 with a white (#fff) text color without having to modify the _buttons.scss file? The mixin button-variant usually sets the text color based on the background color. How can I leverage this mixin ...

twitter-bootstrapsassbootstrap-4scss-mixins

What is the method to enable both text and numbers in an input field while restricting special characters?

Is it possible to allow both text and numbers but disallow special characters in this input field? Currently, my code only allows numbers. How can I modify it to also allow text? Is it possible to achieve this using JavaScript? http://jsfiddle.net/mhgv0 ...

jquerycss

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...

jquerycss

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

javascriptjqueryhtmlcss

List items not appearing inline

I'm having an issue with displaying a list of movies from my database. Instead of showing inline as intended, they are appearing vertically. I've tried using both inline-block and inline for the li elements, but so far nothing has worked. Any ass ...

phphtmlcssblockinline

Arrange CSS to distribute list items across two rows with an unlimited number of items

I need my list items to be arranged in 2 rows like the following: item 1 item 3 item 5 item 7 item 9 .... item 2 item 4 item 6 item 8 ...... My CSS skills are not great, so I am struggling to find a solution for this. I have at ...

htmlcsslist

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

I have been exploring different approaches to achieve this task and it seems like using javascript might be the most effective way. I am currently dealing with a stubborn social icon container placement issue. More details on my previous question can be fo ...

javascriptphpjqueryhtmlcss

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Here's an example of code I wrote to show and hide div elements using pure JavaScript. I noticed that it takes three clicks to initially hide the div elements. After that, it works smoothly. I was attempting to figure out how to display the elements ...

javascripthtmlcss

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

htmlcsstwitter-bootstrap-3

bootstrap style list-group without overlapping

In the image below, you can see that I have a list of American states within a list-group class. My issue is that I am attempting to eliminate the whitespace and essentially move Arkansas below Alaska and so forth. Here is my current HTML and CSS: CodePen ...

htmlcsstwitter-bootstrapbootstrap-4

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Unable to shift the header menus upwards for proper alignment with the logo

Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...

htmlcss

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

Activate the dropdown menu when ul element is in focus

I am working on creating a dropdown navigation using pure CSS. I want the dropdown menu to appear when clicking on the ul. The issue I am facing is that simple ul:focus > ul does not seem to work, even though there is an anchor within it. However, the : ...

htmlcss