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

How to put Image on top of text with Boostrap

SO I want to reach this image But i am getting this result, and i have a sense that i misused boostrap for the grid, but i am not sure it has to do with my initial problem I want to reach a parallax element too by translating the image on the x…
Sara Abo Shousha
  • 11
  • 2
1
vote
1 answer

Bootstrap 5 Horizontal Scroll for Multiple Rows

Container is scrollable only for half of the container. After that scrolling starts to affect navigation panel as well. CSS: .horizontal-scrollable { overflow-x: auto; white-space: nowrap; } HTML:
Bek
  • 25
  • 1
  • 5
1
vote
0 answers

why the distance of carousel is too far from its controls?

I have a carouse, the items inside it is split by two columns using Bootstrap Grid System. One column is some text and the rest column contains another carousel. This is my code: $('.owl-carousel').owlCarousel({ items: 1, loop: true, …
dphuc23
  • 63
  • 5
1
vote
2 answers

Bootstrap: force col-auto not to be too greedy

If we take a look at this minimalistic below example where I layout two columns with class col-auto. I.e.: take the space you need. .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; …
Wouter Vandenputte
  • 406
  • 4
  • 12
1
vote
1 answer

Inside "row row-cols-*", width determination for "col" when there's sibling "col-*"

Column
Column
Column
Column
I thought the above code would have the…
Jyunhao Shih
  • 1,287
  • 2
  • 8
  • 9
1
vote
0 answers

Bootstrap applying grid to tough layout problem

I started to learn bootstrap yesterday. I understand how to create simple grids with straight rows and cols. But this one is tough because columns are “unsymmetrical" if you know what I mean. Image: LAYOUT Every time im trying to create that I got…
trz
  • 23
  • 8
1
vote
2 answers

Bootstrap columns stacking vertically instead of horizontally

.card { height: 600px; width: 800px; background-color: darkseagreen; padding: 20px; } .box1 { background-color: floralwhite; } .box2 { background-color: rgb(238, 185, 80); } .box3 { background-color: indianred; } .box4 { …
Kiok Sianto
  • 35
  • 2
1
vote
1 answer

Bootstrap Responsive Grid System

I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and…
Osama Amr
  • 149
  • 1
  • 2
  • 13
1
vote
0 answers

filling the gap of bootstrap 3 grid system with an image in large devices

i have two columns (col-6) for one my sections. the problem is that the gap between these two columns is so much that i decided to fill this gap by putting a narrow image between them. this is my code:
1
vote
1 answer

Bootstrap Grid Row does not align center if hidden then shown with JS

Apologies in advance for the wonky indentation. I have a simple Bootstrap Grid setup like so
Mikey
  • 107
  • 2
  • 8
1
vote
2 answers

Bootstrap GRID/Layouts

I'm fairly new to bootstrap and I'm kind of struggling with some of the layout settings. I want to create a centered form with a form of tooltip/box to the right that it's inline with the top of the form box. Below is my current form and I'll attach…
snazzyy
  • 121
  • 2
  • 12
1
vote
0 answers

How to align data in tabular form in web view and in list form in mobile view?

Requirement: Web view Mobile View Problem Using Bootstrap grid to achieve the required design but in a web view, it is required that there should be one whole column for an image if I go with one column so in mobile view the text which needs to be…
Zain Ul Abideen
  • 1,617
  • 1
  • 11
  • 25
1
vote
1 answer

What is the issue having a different child for rows than col on a bootstrap grid?

Yesterday I was doing a review of our HTML structures and found out we have containers used as row child's like this
Camilo Casadiego
  • 907
  • 3
  • 9
  • 33
1
vote
0 answers

Bootstrap 4 stretch background of column to fill width of screen without container-fluid and keep alignment with grid

I'm currently setting up a design and have stumbled upon this question which i cant seem to find a "pretty" solution to. If you have a look at the image below you will see 3 rows where one has two columns. The red colors behind the columns…
Jonas m
  • 2,646
  • 3
  • 22
  • 43
1
vote
1 answer

how to use the grid feature of Bootrap-4?

I am new to the web designing and trying to learn bootstrap. I want to create a product page for that I tried to use the predefined template from - https://www.bootdey.com/snippets/view/shop-product-detail#css When I used the given code it is not…
Sid
  • 2,792
  • 9
  • 55
  • 111
1 2
3
…
16 17