251 questions
0
votes
2
answers
198
views
How to add a gap between column without moving to another row in bootstrap 5?
I'm working on a testimonial section that has a structure like this :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-...
- 13
0
votes
2
answers
364
views
Bootstrap 5.3.x: Why does "w-100 d-block d-md-none" not work when I try to break a column to a new line?
I am trying to create a list of images and each occupies 4 columns in medium and larger screens and occupies 12 columns on smaller screens.
However, when I try to resize the screen to smaller size (...
- 1
0
votes
1
answer
87
views
Boostrap 5.3 different resolution column doesnt work
I want 4 div's that it must be changed of witdh with different resolutions, but it doesn't work.
I want
when the resolution is ≥992px the div are in the same line (3 column)
when the resolution is ≥...
0
votes
1
answer
201
views
Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'
I tried to use Bootstrap grid, but I encountered a problem. When I'm running the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
...
- 317
0
votes
0
answers
736
views
Bootstrap 5 Grid Spacing (gutters) are missing, or is it my setup?
Maybe I'm doing something wrong, but I did go out to fiddle, and used a very simple version with bootstrap 5.
Here's the setup.
https://jsfiddle.net/boilerplate/bootstrap/
I haven't worked with ...
- 47
0
votes
0
answers
43
views
Overflow properties working differently on a div inside and outside a CSS grid
I have the following structure, which I will call 'list of files' (using Bootstrap 4):
.file-component {
border: 1px solid red;
}
.file-component .file-name {
overflow: hidden;
text-...
- 483
0
votes
1
answer
44
views
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. ...
- 263
-2
votes
1
answer
281
views
Dynamic Bootstrap grid column size
I'm using the Bootstrap grid and I have two columns:
<div class="col-md-7 no-padding">
... content 1 ...
</div>
<div class="col-md-5">
... content 2 ...
<div&...
- 12k
0
votes
3
answers
515
views
Bootstrap with grid layout gets unnecessary spacing in 3 columns
I'm using a react-bootstrap package on my project,
I have a 3 <Col> component like this
<Container>
<Row>
<Col xs={12} lg={7}> {/* A */}
....
&...
- 1,378
0
votes
1
answer
722
views
combining bootstrap breakpoints in class name
Do i really have to declare my bootstrap classes as a combination of all screen sizes and column span for responsiveness?
I am using <div class="col-md-4 col-sm-6 col-xs-12 col-lg-4 >
- 3
0
votes
1
answer
348
views
I don't understand the "mb-sm-0" part in cards (bootstrap 5)?
I did get what I expected but the thing is that I don't quite understand that part which says mb-sm-0
<div class="row">
<div class="col-lg-4 mb-3 mb-sm-0">
<...
1
vote
1
answer
697
views
Grid from Bootstrap not working in angular15
I´m trying to make a simple page using bootstrap grid, but for some reason it's not working.
app-component.html:
<body>
<div class="container">
<div class="row"&...
- 101
1
vote
0
answers
61
views
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 ...
0
votes
1
answer
584
views
Is it normal to specify all sizes (xs,sm,md,lg,xs) for every single column in a row, in bootstrap grid?
I have made an array of 30+ footballplayers, and was planning on printing them all to columns with a for-each loop, into a single row within a container with bootstrap grid.
FOR NOW I have just ...
- 33
0
votes
1
answer
178
views
Rows and colums with bootstrap not working
So im trying to display multiple cards in a row I followed the documentation but for some reason my cards keep displaying in a single colum. Can anyone see what im doing wrong??
<section class=&...
0
votes
1
answer
300
views
BootStrap 5 React Js 4 products in a row not getting displayed
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
&...
user14111271
3
votes
2
answers
2k
views
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 ...
- 2,422
0
votes
1
answer
26
views
How to place two divs on the right for desktop, below for tablet using Bootstrap
I'm currently trying to place some divs using Bootstrap grid system, and after multiple attempts it seems like it's almost working.
However, there is some weird extra padding on the right, and I can't ...
- 2,218
1
vote
1
answer
9k
views
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: ...
- 25
-1
votes
1
answer
218
views
How to dynamically alter column width in bootstrap grid
I want to place number of columns in a row dynamically. For example each student in students list should have one column.
The width of the column should depend on number of students.
Any help is much ...
- 21
1
vote
0
answers
50
views
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')...
- 63
0
votes
1
answer
680
views
Why is a column going into the next row when there are only 12 columns?
I have a row with 4 columns that are each 3 wide, which adds up to the 12 that are supposed the be in a row, but for some reason the last one is still going onto a new row. Any idea how to fix this?
...
1
vote
2
answers
1k
views
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 {
...
0
votes
1
answer
242
views
Bootstrap grid is not working on codeply or devtools. size of <div class="col-lg-3 col-md-4 col-sm-6"> is not changing
I tried using viewport meta tag in head.
I tried using a div class="container" around it.
no matter what i do. its not working on codeply, and chrome devtools.
but its working when i change ...
- 13
0
votes
0
answers
225
views
Fixing uneven columns in Bootstrap 5 grid
I've been studying web development for 2 months now. Currently tinkering with bootstrap. How do I fix this problem?
I want the 2 columns to be same height but the right columns keeps on overflowing. I ...
- 21
-1
votes
1
answer
3k
views
Is there a way to make bootstrap grid span multiple rows?
It spans rows columns, but how do I make bootstrap 5 span multiple rows? I want to make a collage with images, and I would like the collage to look like this:
https://i.sstatic.net/JjnF0.png
(guess I ...
- 11
0
votes
0
answers
66
views
How to reduce the gap between rows, as well as add a thin margin between every item of a Bootstrap lightbox?
I would like to have a thinner space between my 3 rows, and ideally and really thin space (close to the row no-gutters class) between each of these pictures.
Here is the result:
<div class="...
- 1
-1
votes
2
answers
783
views
Bootstrap 5 Grid Not Equaling 12 Column Width
Correct me if I am wrong, a bootstrap grid consists of 12 columns (width-wise [per the Grid System Documentation]). If I specify two columns within a fluid container (always width 100%), the first ...
- 1,519
2
votes
3
answers
5k
views
How to add spacing between columns in Bootstrap 5?
screenshot
i want like this
As you can see in the picture, I can't put a space between the red and blue columns. I tried many Bootstrap classes, but I couldn't get the result I wanted. I added m-4 to ...
- 23
0
votes
0
answers
149
views
How can I make the width of two Bootstrap 5 Grids even?
I am remaking my portfolio and in the projects section I want the description on column and the project image on the other. I have used grids in the past without having an issue with the width of the ...
- 21
1
vote
1
answer
858
views
Inside "row row-cols-*", width determination for "col" when there's sibling "col-*"
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
...
- 1,478
1
vote
0
answers
40
views
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. ...
- 23
0
votes
1
answer
1k
views
class="d-none d-lg-block" in Bootstrap
I'm trying to use class="d-none d-lg-block". But it doesn't work for me.
Below is the code that I'm trying.
Can you please correct me if I'm wrong?
<div class="row-content">
...
0
votes
1
answer
647
views
Can I align navigation in Bootstrap (5) to the grid? As in my example?
Is it even possible to do it? I would appreciate any directions. I would like to stay within Bootstrap framework
Text blocks should be aligned with the navigation border left and right:
<link ...
- 1
3
votes
1
answer
2k
views
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 ...
- 83
1
vote
2
answers
981
views
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 {
...
- 35
2
votes
2
answers
2k
views
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: ...
- 5,583
0
votes
1
answer
650
views
Bootstrap Bigger Icon
in the screenshot below, i have tried to add 2 button icons in 2 different columns which are also children of a row.
I want that buttons to fit as much as big they can in the column as you see.
Here ...
0
votes
1
answer
916
views
How to prevent bootstrap column from collapsing to new line when width of the parent is reduced?
<div class="col">
<div class="alert alert-danger display-error pt-3 pb-0 mb-0 mt-0" style="display: none"></div>
<h2 class=&...
- 13
2
votes
4
answers
7k
views
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 ...
- 33
0
votes
2
answers
60
views
How to dynamically create a new row?
I'm using react-bootstrap and I'm wondering if it's possible to dynamically go to the next row based on code. Let me show you what I'm trying to do :
// components/WeatherList.js
import React from '...
- 828
1
vote
1
answer
241
views
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 ...
- 149
0
votes
1
answer
1k
views
PrimeVue DataTable scrollable header misaligned
when using a scrollable PrimeVue DataTable with fixed column widths (using px), in conjunction with Bootstrap grid, I am getting this behaviour:
This issue only seems to occur if the table has more ...
- 1,078
-2
votes
1
answer
3k
views
how do i create a photo collage with html css and bootstrap
I tried adding images to the div it did't work for me,
<img
class="img-fluid"
src="https://via.placeholder.com/800x800"
...
1
vote
0
answers
144
views
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:...
- 331
0
votes
1
answer
2k
views
Right alignment first column and left align second column in div of Bootstrap
I looked through the official Bootstrap grid layout page and there are many examples of alignment. I am looking forward to a class that will make the layout like
Every content of the first column ...
- 3,147
4
votes
2
answers
8k
views
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 ...
2
votes
2
answers
3k
views
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 "...
- 485
1
vote
1
answer
299
views
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
<div class="row justify-content-center" align="center" id="details">
...
- 107
0
votes
1
answer
659
views
adjusting span value inside a col in bootstrap 4
I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the ...
- 27