Bootstrap allows for the creation of five columns of equal width that span the full width of the container

My PSD template includes a CONTAINER with 5 equal width columns measuring 344px each. I initially opted for Bootstrap to handle responsiveness, but now I'm feeling overwhelmed by the task.

Is there a way to tackle this issue, or should I:

  • Revise my PSD template to align with Bootstrap grid and dimensions
  • Avoid using Bootstrap and create custom responsive classes instead

Check out the code on Codepen: http://codepen.io/anon/pen/YZbBQG

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>
csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Answer №1

If you're looking to optimize your layout, I suggest utilizing the auto layout col-lg columns for wider screens to accommodate up to 5 columns across. Then, you can scale down to standard size grid columns on md, sm, and so on.

Bootstrap 4.6 (update 2020)

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 d-none d-lg-block">
           <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

Note: This approach allows the columns to expand uniformly to fill the row's width. In situations where column content dictates the width (e.g., fixed-width images or non-wrapping text), apply min-width:0 to ensure equal column widths despite their content.

.col-lg {
    min-width: 0;
}

Answer №2

To easily customize the width in bootstrap 4, just add a single flex line to the columns.

.row > .col {
  flex: 0 0 344px;
  background: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

Answer №3

Utilizing Flexbox is another option you can explore. It's recommended to set the maximum container width at 1200px or lower.

<div class="container">
   <div>A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
</div>

.container{
    display: flex;
    width: 1720px;
}

Answer №4

If you want to tailor your bootstrap experience in the most effective manner, there's a fantastic resource available. This particular link provides an extensive array of options for customization, allowing you to adjust various settings such as grid column number to suit your needs.

http://getbootstrap.com/customize/

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

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

Refreshing your web project with the newest and stylish Bootstrap and SASS upgrades

I have been working on an ASP .NET web project that includes jQuery, jQuery UI, and reset/normalize css stylesheets. The CSS code is not up to par, so I plan to revamp it with a budget allocated for the task :) During my research, I found two intriguing s ...

csstwitter-bootstrapsass

Four-region selection box

Is there a way to create a quad state checkbox without using a set of images for various icons? I know how to have a tri-state checkbox with indeterminate, but I need to rotate through 4 states. Are there any more elegant solutions available? ...

htmlcss

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

The div element is experiencing a resizing issue

I am currently working on the following HTML markup: <div class="card" style="height:100%"> <div class="controlPanelContainer"> <div class="card" style="background-color:yellow;height:200px"> </div> <div class= ...

cssbootstrap-4

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

cssangularchart.jspie-chart

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion

How can I display a clicked-on div while hiding all other divs using jQuery?

I want to create a website where a button can show and hide a specific div, but my challenge is; How can I ensure that clicking on one button hides all other divs? Here is the JavaScript code: function showHide(divId){ var theDiv = document.getEleme ...

javascriptjqueryhtmlcssonclick

A guide to defining a color variable in React JS

I am trying to use a random color generated from an array to style various elements in my design. Specifically, I want to apply this color to certain elements but am unsure how to do so. For example, I know how to make a heading red like this: const elem ...

javascripthtmlcssreactjssaas

Utilize CSS to break through a backdrop

I have come across a rather peculiar question, and I'd like to elaborate with a code snippet: .container { width: 200px; height: 200px; background: rgba(200, 200, 200, .87); } .pin { position: absolute; left: 50px; top: 20px; } .overl ...

csssvg

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Why does document.body.style.backgroundColor not work with an external CSS style sheet? I have the following CSS: body { background-color: red; } In my css style sheet, when I use JavaScript alert alert(document.body.style.backgroundColor);, it sh ...

javascripthtmlcss

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

phpcss

How can jQuery be used to target a specific class based on its inner value?

For instance, within a div of the same class, there are 6 "p" tags - some containing 'member' text and others not. I aim to use jQuery to select all "p" tags with 'member' as their inner text and apply an additional class to them. Here ...

javascriptjquerycss

Fixing Sticky Navigation Bar on Scroll (JavaScript, HTML, CSS)

I'm working on this site as a fun side project, but I've hit a roadblock. The sticky nav bar I implemented jumps when the user scrolls down far enough. Despite reading through other discussions, I can't seem to figure out the solution. I su ...

javascripthtmlcss

Center text in form-control items on Bootstrap 3 grids

Can you provide guidance on achieving proper alignment of inputs and labels across bootstrap grids? I am looking to ensure that the labels are positioned exactly the same as the first column. Please refer to my plunk: http://plnkr.co/edit/jaMAp38Rr1g7BLW ...

csstwitter-bootstrap-3

Leveraging the Power of CSS in Your Express Applications

Struggling to make my CSS links functional while working on localhost. Currently, when I view Index.html on my server, it displays as plain text without any styling. Even after trying the express middleware, the CSS files are still not being served, result ...

javascripthtmlcssnode.jsexpress

Displaying leap years and non-leap years in distinct tables

I attempted to organize the display of leap years and non-leap years from 1991 to 2100 into two separate tables, but unfortunately, I was unsuccessful. Could you kindly offer guidance on how to present this information in a table format or a grid system? ...

phphtmlcssbootstrap-modalleap-year

Is there a way for me to determine if something is hidden?

My goal is to have selector B toggle when selector A is clicked or when clicking outside of selector B. This part is working fine. However, I'm struggling with preventing selector B from toggling back unless selector A is specifically clicked - not w ...

javascripthtmljquerycssfrontend

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

csscss-float

Transitioning in Vue.js can be triggered by changing a value up or down

My current transition block component is set up like this: <div v-if="!surveyResultIsReady" class="vh-md-40 position-relative" > <transition name="custom-classes-transition" enter-active-class="animated slideInRight" ...

javascriptcssvue.jsvuejs2vue-transitions