Organize items within a compartment using Bootstrap3

Question

Organize items within a compartment using Bootstrap3

I have decided to update my website to Bootstrap3 and encountered a common issue that many others seem to be facing as well. I am trying to evenly distribute 4 elements, each approximately 220px wide, inside a 990px container. In the old version of Bootstrap, margins were automatically added for this purpose. However, with the new padding approach, this is no longer the case. Does anyone have any tips on how to solve this problem?

Here is an example code snippet :

<div class="container">
    <div class="row">
    <section class="col-md-12">
        <article class="col-md-3">content</article>
        <article class="col-md-3">content2</article>
        <article class="col-md-3">content3</article>
        <article class="col-md-3">content4</article>
    </section>
    </div>
</div>

Check out the fiddle link for more details :

http://jsfiddle.net/QJyCe/

css twitter-bootstrap responsive-design twitter-bootstrap-3

Answer 1

Answer №1

I typically approach this by utilizing the "col-" div as a wrapper and inserting the content HTML within it:

<div class="row">
    <div class="col-md-3">
        <article>
            article1
        </article>
    </div>
    <div class="col-md-3">
        <article>
            article2
        </article>        
    </div>
    <div class="col-md-3">
        <article>
            article3
        </article>        
    </div>
    <div class="col-md-3">
        <article>
            article4
        </article>        
    </div>    
</div>

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
article { height:100px; padding:20px; border: 1px solid black; }

http://jsfiddle.net/25BHu/1/

Answer 2

I typically approach this by utilizing the "col-" div as a wrapper and inserting the content HTML within it:

<div class="row">
    <div class="col-md-3">
        <article>
            article1
        </article>
    </div>
    <div class="col-md-3">
        <article>
            article2
        </article>        
    </div>
    <div class="col-md-3">
        <article>
            article3
        </article>        
    </div>
    <div class="col-md-3">
        <article>
            article4
        </article>        
    </div>    
</div>

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
article { height:100px; padding:20px; border: 1px solid black; }

http://jsfiddle.net/25BHu/1/

Organize items within a compartment using Bootstrap3

Answer №1

Similar questions

CSS: The background color of the body is appearing correctly when viewed locally, but does not display on

The use of jQuery addClass does not produce any changes

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

Missing ng-required fields not displaying the has-error validation in AngularJS forms

Showing the Datepicker from jQuery right in the middle of the screen

What is preventing me from displaying my paragraph?

Is it possible to place a pseudo-element beneath the background of its parent element?

Trouble encountered while creating a table with the Bootstrap grid system

Struggling to grasp the concept of Vue3 style binding

Tips on adjusting section height as window size changes?

Modify the text inside a div based on the navigation of another div

Ways to implement CSS with javascript

What is the best way to incorporate CSS into an Angular 4 project?

Creating a dynamic overlapping image effect with CSS and JavaScript

What is the process for customizing the onmouseover property in HTML?

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

Flexbox: The final element is not positioned on the right side