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
1 answer

2 x 2 matrix on medium and large, 4 x 1 matrix on small devices

I wonder how to obtain the following layout. On medium and large devices I'd like to have a 2 rows and 2 columns layout (2 x 2 matrix). On small (and extra small) devices or when resizing to small, I'd like to have a 4 rows and one column…
woodz
  • 737
  • 6
  • 13
1
vote
1 answer

How to span a column two rows in Bootstrap 4

Though this question has been asked a lot before, all answers suggestion that to span a column, place the other columns into an inner row, like so:
logo
Khaled
  • 8,255
  • 11
  • 35
  • 56
1
vote
4 answers

How to align three images on a row

There will be a certain amount of images in database which is unknown when this page is being redirected, which means I can't set the amount of div accordingly. What I am after is no matter how many images are there, I would like to display it in a…
unknown
  • 193
  • 3
  • 6
  • 15
1
vote
2 answers

bootstrap 4 Grid, laying 4 elements in a row with a custom horizontal gutter

I am trying to lay 4 elements in a row with a custom horizontal gutter, I tried to put each element in a col with the class of col-md-2 for a certain screen size, and modify the margin-right of each element to my need.. but it didn't look very good,…
Swilam Muhammad
  • 133
  • 2
  • 14
1
vote
1 answer

Bootstrap 4 card layout width not consistent

My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2. How do I get the…
The OrangeGoblin
  • 764
  • 2
  • 7
  • 27
1
vote
1 answer

When using Twitter Bootstrap 3's Grid, panel-body overlaps the navbar-header

For some reason when I'm using col-xs-* inside the panel-body, the content overlaps the panel-heading when I scroll down. This doesn't happen when I remove the col-xs-* and row tags. Before Scrolling down: After Scrolling down: Source…
Itay
  • 25
  • 5
1
vote
1 answer

Applying Bootstrap 3 grid to a special screen size

I have two divs with col-xs-12 col-md-9 and col-xs-12 col-md-3. They appear as expected on a normal monitor: on a phone screen: And here is my issue. I have to adapt the layout to a special screen of 1300x1900 px. Yes, 1300 px width and 1900 px…
neptune
  • 1,211
  • 2
  • 19
  • 32
1
vote
4 answers

Setting column classes for different screens using Bootstrap

I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for under 768px I would like to place them one under another. file.html
…
user9347049
  • 1,927
  • 3
  • 27
  • 66
1
vote
2 answers

Aligning divs to left and center

A)I want my Filters div to be aligned to the left of the Products, not above Products. B) I want the text in the products div to be closer to the image, not so far away, as in the preview below. I am using php laravel. How do I achieve this? This…
hsnsd
  • 1,728
  • 12
  • 30
1
vote
1 answer

How to preserve grid layout across devices using Bootstrap?

I am building a website using Bootstrap v.3 which needs to be consistent across devices. I want the same layout to be maintained across all the devices. I have used the following code to display two youtube videos side by side.
…
Boudhayan Dev
  • 970
  • 4
  • 14
  • 42
1
vote
0 answers

Bootstrap grid column size not working with "white-space: nowrap;"

I am currently working on a page containing an html table and I manage columns width with bootstrap grid. Here is a small example reproducing the situation I am struggling with : https://jsfiddle.net/ggu5Lpc0/45/ I have based my work on the…
T. Lecomte
  • 11
  • 3
1
vote
1 answer

Mysterious Line above Collapsed navbar

I've created a navbar that works perfectly but seems to be styled with a mysterious black line (see the yellow arrow) that runs below the burger when the menu is collapsed. Any help in removing this would be much appreciated.
clynch
  • 13
  • 2
1
vote
2 answers

bootstrap grid when mobile

In full screen I didn't want to use grid and I want to display 7 and I want to manage image 2,2,2,1 when It in mobile how can I do something like this ...
test1321
  • 331
  • 1
  • 8
  • 23
1
vote
0 answers

Bootstrap row selector is not working well

This is weird: I added a row selector for each chart, but the last chart C3 chart is always in the top right corner. I uploaded the charts and the elements code. I cannot find any error. I am using dc.js and c3.js. I am using mongodb to store the…
Kreedz Zhen
  • 380
  • 2
  • 12
1
vote
1 answer

The The content does not appear in the correct position in the Grid system. Bootstrap

I have problem here with the logo and navbar in the design. There are 3 column for the logo and 6 for navbar like this image But when I running the code They do not appear in the correct position and I do not now where is the mistake in the code.…
Abdullah
  • 13
  • 3
1 2 3
…
16 17