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
2 answers

apply bootstrap grid to RadioButtonList's ListItem

I want to apply bootstrap grid to the RadioButtonList's ListItem: Col-md-12 +-------------------------------------------------------------------+ | Col-md-2 Col-md-2 Col-md-2 Col-md-2 Col-md-2 | | +--------+ +--------+ …
user1773603
1
vote
3 answers

Bootstrap 4 row & column stacking vertically instead of horizontally

I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead. I've tried changing the size of the columns, but they always stack on top of each other. Any ideas? …
Nick Tamburro
  • 150
  • 1
  • 4
  • 16
1
vote
1 answer

How can I move columns in small screen on bootstrap?

I have 3 columns (1) .col-md-4 | (2) .col-md-4 | (3) .col-md-2 | (4) .col-md-2 I want this in small screen (Phone / small screen) as: (1) | (4) | (2) | (3) |
Foisal Mehedi
  • 39
  • 10
1
vote
2 answers

Bootstrap 4 Floating with Flex

How can I float my Layout like this with Bootstrap 4 flex Grid? I tried it with the flex order function but see my result and the problem
Alper Aydingül
  • 251
  • 1
  • 9
1
vote
1 answer

Bootstrap grid system: column classes without a number

Why can I use bootstrap col classes without the number of cols and how is this interpreted? E.g. in the snippet
the…
Oblomov
  • 8,953
  • 22
  • 60
  • 106
1
vote
1 answer

bootstrap grid columns divide into separate rows with each second row split into separate columns and at the center

I am getting started with bootstrap grid and am trying to get this layout ready.[![enter image description here][1]][1] I am a bit confused about how to divide the the three main columns into separate parts so I can place the corresponding…
user1892775
  • 2,001
  • 6
  • 37
  • 58
1
vote
2 answers

Reorder columns in bootstrap for larger display

The mobile and tablet layout for this grid is as follows: [Header] [Image] [Content] However, in medium/larger screen, I would like to change it to this layout The code snippet below is created with mobile first so that it can be reordered in large…
Goku
  • 15
  • 1
  • 3
1
vote
0 answers

JQuery matchHeight.js overlayed images

I'm facing a strange behaviour while using JQuery matchHeight.js. Please take a look at the following print screen: Overlayed images after running matchHeight.js: If I hit F5, then the desired result comes up: Correct layout after hitting F5: Here…
Tiago
  • 1
  • 6
1
vote
1 answer

Active class now work corretly in HTML

I have a problem in my html. I can't find how can i solve it. [class="active" then Home mark with red underline. default][1] [When i click, red underline disappered][2] [When i click anywhere, it is come again][3] /*input[type=text] { width:…
I. KA
  • 15
  • 6
1
vote
1 answer

React js datetimepicker usage inside component

I am a newbie to recatjs.I have a requirement to create a input field with datetimepicker using boostrap,as I am using boostrap datetimepicker cdn link and I don't know how to call inside component and get the values of datetimepicker in…
priya
  • 158
  • 5
  • 16
0
votes
0 answers

Transformed image resizing strangely inside a Bootstrap grid

I'm using a Bootstrap grid to have 3 columns on large screens, two on smaller screens. Inside the grid I'm displaying products. These products have two images that need to be overlaid. To accomplish this I'm using the standard pattern of a container…
Colin 't Hart
  • 7,372
  • 3
  • 28
  • 51
0
votes
0 answers

Bootstrap card content gets collapsed in the middle

Im trying to design card on my website. Unfortunetly i cant use 100% of my card because somehow the grid system is cutting of the content at the half of the length. This is how it looks like I need to implement the bootstrap grid system to make it…
Teamy
  • 17
  • 5
0
votes
1 answer

Remove x axis padding from container-fluid without horizontal scroll Boostrap 5

I have an image that should be full width at the top of a screen. I've removed padding left and right using px-0 but this has affected the page. I am now able to move around the page with the cursor. I do not want that to be the case
A.Mac
  • 203
  • 3
  • 19
0
votes
0 answers

Structuring columns in HTML markup using Bootstrap Grid system

I'm creating a "stacked" image component, at any one time 4 images are visible (.demo-card). Desired behaviour: default (mobile): cards should be in a single column layout (as is currently) md (tablet): cards should be in displayed in 2 rows of 2…
cts
  • 908
  • 1
  • 9
  • 30
0
votes
3 answers

Bootstrap with grid layout gets unnecessary spacing in 3 columns

I'm using a react-bootstrap package on my project, I have a 3 component like this {/* A */} .... {/* B */} ... …
Dylan
  • 1,121
  • 1
  • 13
  • 28
1 2 3
…
16 17