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
1
vote
0 answers

jQuery UI Resizable affects bootstrap grid columns system

I found a good topic from jsfiddle, and the title is jQuery UI Resizable affects only on column classes. It explains how to change the bootstrap grid system so that it can be resized Here the original link https://codepen.io/delagics/pen/PWxjMN I…
Denis
  • 73
  • 13
1
vote
2 answers

Bootstrap Grid going wrong

Maybe I am blind, but my Bootstrap Grid is not behaving as expected. Shouldn't it fill the whole row? Image of possily wrong behavior
{{event?.teamA?.name}} vs.…
Galileon
  • 26
  • 5
1
vote
2 answers

Nested Bootsrap Grid Padding Issue

I am unable to get equal padding form custom nested grid. In the below snippet I show you the desired grid. I am unable to add small gap of lets say 5px between all boxes. The issue is that if I change custom padding then I am not able to maintain…
DadyByte
  • 894
  • 6
  • 18
  • 30
1
vote
4 answers

Grid columns doesn't wrap as expected

I have the following bootstrap-4 column structure:
A
B
C
The…
bockzior
  • 199
  • 1
  • 6
  • 20
1
vote
1 answer

How to center content generated by *ngFor in a bootstrap grid?

I would like to center some content in a row using the Bootstrap grid system. I have looked at many examples about this including this, but my example differs because of the use of a separate angular component to generate the…
Fletch
  • 769
  • 1
  • 12
  • 33
1
vote
1 answer

How to manage bootstrap Mansory col height?

I don't understand how to change the height of my column in a way to have three elements in my first and second column. I'm new to design element so a little help would be very helpful for me Mock-up that I want to create: My code looks like this:…
JeanLagniaux
  • 13
  • 4
1
vote
2 answers

Using Bootstrap Grid, Why Can I Not Space Out My Divs?

I'm working on my first web dev portfolio and am trying to incorporate the Bootstrap Grid system to the project links. I've searched through Bootstrap's documentation (v4.5), Stack Overflow, and just googling various searches to death. I've tried…
Brianna Anderson
  • 11
  • 2
1
vote
2 answers

How to make bootstrap 4 column height the same as row height

I've created this layout in Angular 9 using Bootstrap 4's row and column classes. The charts are created by the Chart.js library. For some reason I can't get the columns in each row to be of the same height, so I've come here for help. Layout…
Johannes Karsten
  • 69
  • 1
  • 10
1
vote
2 answers

Is it possible to create a column with height equal to its width in Bootstrap 4?

Is it possible to create a column with height equal to its width in Bootstrap 4? The first 2 columns should be quadratic and third one has height as previous columns. Is it possible?
…
A.T.
  • 25
  • 5
1
vote
1 answer

Bootstrap column grid: Margin issues

While splitting my page.aspx in 4 columns, I notice in the first and fourth columns several blank spaces (on the left and right side, respectively), thus narrowing the width of the second and third columns. Knowing a way to get rid of such default…
dark.vador
  • 619
  • 1
  • 6
  • 25
1
vote
2 answers

Grid falls apart after i give any margin or padding

I am using bootstrap-grid system with Material UI, everything works great just a single problem and its the fact that the grid system doesn't keep its slots space after any padding or margin and instead the items go to the next row or line when…
Ali Ahmadi
  • 701
  • 6
  • 27
1
vote
2 answers

why Bootstrap grid positioning leaves empty columns?

I am trying to create a Bootstrap positioning grid, generated by a PHP loop. The grid would contain 11 imgs, and the loop iterates 11 times. When the grid is created I don't understand why 2 columns always get skipped this is the code I am using, I…
Gabriele Conti
  • 11
  • 1
1
vote
1 answer

Using bootstrap grid to display items from api call with ngFor

I do an api call to get data from The Movie Database. I then want to display the data using the bootstrap grid system. This is what it currently looks like using Angular Material Grid: …
Zafiera Davids
  • 221
  • 1
  • 2
  • 13
1
vote
2 answers

How to always hide sidebar on load in Gentelella like in mobile mode?

I need to keep the sidebar menu hidden by default at all times, so that when the user clicks the toggle button it'll display the collapsed menu(nav-sm). In other words, I need the same behavior the mobile mode has, in all devices. I tried a lot, but…
Danf
  • 1,409
  • 2
  • 21
  • 39
1 2 3
…
16 17