Stack Overflow
Stack Overflow

Questions tagged [bootstrap-grid]

Bootstrap Grid is Twitter's flexbox-based grid system that uses classes to determine the layout of your document. Use the [css-grid] tag for questions about CSS Grid, instead.

Bootstrap grids are Bootstrap's flexbox-based grid system that uses classes to determine the layout of your document. Use the tag for questions about CSS Grid, instead.

You can read about Bootstrap grids and how to use them at Twitter's Grid system page.

Read about Bootstrap in general at https://getbootstrap.com/docs/4.0/getting-started/introduction/

254 questions
139
votes
6 answers

Bootstrap combining rows (rowspan)

I am testing Twitter Bootstrap and got stuck with basic scaffolding with rows. I revisited their documentation number of times and I can see nesting columns where you can basically nest columns within a column but I cannot locate the capability of…
Seong Lee
  • 10,314
  • 25
  • 68
  • 106
23
votes
1 answer

Bootstrap cards with 100% height and margin bottom

I am attempting to develop a grid of Bootstrap 4 cards with the following requirements: All cards must sit within one div class="row", because I don't know how many cards there will be total and I want rows to look good at different screen…
Sam
  • 1,952
  • 1
  • 18
  • 31
22
votes
2 answers

Bootstrap 4 Safari on Mac Grid issue

There is an issue with Bootstrap 4 and Safari brower on Mac. When using cols inside a row it breaks it, and doesn't work like on firefox or chrome. I'm using a simple code like this:
Pau Mompó
  • 1,151
  • 1
  • 11
  • 14
18
votes
6 answers

Make images the same size in bootstrap grid

I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size. I tried to use the max-height or…
Jacob Murin
  • 221
  • 1
  • 3
  • 4
13
votes
5 answers

bootstrap grid with border between columns

How can i make a bootstrap grid with one row and inside that 2 columns. First column size 9 col-md-9 and the second size 3 col-md-3 that no matter how long the content will be inside the columns the row and columns will be nice and border between…
user2818430
  • 5,853
  • 21
  • 82
  • 148
4
votes
1 answer

My Bootstrap row is extending beyond the page width when I resize it?

I'm very new to Bootstrap and have been working through some tutorials. I'm currently trying to rebuild Google's homepage and have run into some difficulty with the responsiveness of the grid system. I've created a very basic layout of the top bar…
Tjm92
  • 167
  • 2
  • 19
3
votes
2 answers

Can bootstrap grid system use the width of the parent "container-fluid" as its media with?

In bootstrap 5.2, the breakpoints of the grid system is the width of the screen @media. This works great for the most parts. But when nesting grids it becomes tricky to deal with. In my project, I am using reusable components to generate the HTML.…
Jay
  • 1,168
  • 13
  • 41
3
votes
1 answer

Bootstrap make all columns equal to largest col-auto width

I am using Bootstrap's grid system. My grid has multiple rows where the first column is set to col-auto to wrap its content (different lengths). Is there a way to make the width of the first column of each row equal to the largest width required by…
rickyz
  • 71
  • 7
3
votes
2 answers

Bootstrap v5 Grid is not working in "col-lg" case

I am learning bootstrap, and I am seeing a course focused on Bootstrap 4. I am not sure if the following has to do with that, but I am not able to go through this exercise. I am making this grid for a large screen size: And when reducing the screen…
Blanca Morillo
  • 45
  • 2
  • 7
3
votes
1 answer

How to handle large data in drop down with search box bootstrap

I have one bootstrap drop down with search text box in my web page. I am adding dynamic data into that drop down, but they are large and come from a database. That why it takes long to load. Does anyone know the solution for this problem?
Dipak Bhosale
  • 51
  • 8
3
votes
1 answer

Boostrap 4 extra small col width 100% not working

I have developed a static HTML page with Bootstrap 4, using col equal with big screen but on Extra small screens, the col is not getting 100% width. What did I forget?
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
3
votes
1 answer

Expand Bootstrap Inline Form to Fit Full-Width of Column

I'm new to Bootstrap and have been messing around with v4. My question is on making an inline form expand to the full-width available inside the column. Below is my markup:
Fuzz
  • 31
  • 1
  • 2
2
votes
2 answers

Calculate with Bootstrap container width in Sass

I want to add a 50% container to every breakpoint. For example: The witdh of .container is 1140px in the xl breakpoint. So I want to do something like this: .is-style-container-50 { max-width: calc($container-max-widths / 2); } I found the…
Cray
  • 5,307
  • 11
  • 70
  • 166
2
votes
4 answers

How do I highlight a grid row on hover and make it selected on click in Bootstrap?

I am loading data to a grid with 3 columns in Blazor. For the grid structure I have used Bootstrap rows and columns. If I need to highlight rows on hover and keep the row selected using onClick event what is the best way to achieve it? Below is how…
ZionSaver
  • 33
  • 1
  • 4
2
votes
2 answers

How can I merge 2 DIV table rows in Bootstrap 5

In the below snippet I have 6 cells in 2 rows, but I need to merge cell number "2" and "5". If doing it as a CSS Table DIV I know this can be done, but I like to do this the "Bootstrap way" (if any such exist), but have not been able find any…
Stig Kølbæk
  • 432
  • 2
  • 18
1
2 3
…
16 17