Questions tagged [twitter-bootstrap]

Bootstrap is a frontend framework designed to kick-start development of Web apps and sites. For questions related to a version of Bootstrap also use the specific version's tag from "twitter-bootstrap-2", "twitter-bootstrap-3", "bootstrap-4" and "bootstrap-5" tags.

Filter by
Sorted by
Tagged with
-4 votes
0 answers
11 views

Trying to traverse my local storage with the back button or use refresh when the local storage reaches 0 after going traversing backwards [closed]

The go back button doesn’t seem to be going back through previous cocktails. I’m really new at this and it seems when I use dev tools it is saving to local storage. I’ve tried some various operators ...
Bkness's user avatar
  • 1
0 votes
0 answers
7 views

Bootstrap 5 cell configuration

I would like to configure 3 cells using Bootstrap 5 that will be rendered slightly different on Desktop and Mobile display. Can we do this with Bootstrap 5 ? Here is what I want to achieve Here is my ...
fastdev95's user avatar
0 votes
1 answer
17 views

Bootstrap 5 responsive radius (rounded)

Using Bootstrap 5.3.1. I have already added responsive radius via Utility API, and can confirm that my CSS file includes classes like .rounded-top-sm-4, .rounded-end-sm-4, etc. # utilities_custom.scss ...
Victor's user avatar
  • 13.1k
1 vote
1 answer
33 views

Setting padding, background color and radius on Bootstrap Icon

Using Bootstrap Icons and Bootstrap 5. I had been trying to set a padding, background color, and radius circle on a Bootstrap Icon, so that there is a perfect circle background behind the icon. I ...
Victor's user avatar
  • 13.1k
1 vote
1 answer
41 views

How can I change rows and columns order depending the viewport?

Using Bootstrap 5 is it possible to have these two different layouts depending on the viewport? I would like to avoid display:none and JS/Jquery tricks if possible. I try to do this by using ...
AviateurLunaire's user avatar
0 votes
0 answers
23 views

Overlaying Div on Image Not Working in Bootstrap 5 Card Body

I'm creating an application that allows the user to design an item by inputting text which will then be generated on the item and displayed as a preview image. I have the <img> being displayed ...
jj15's user avatar
  • 103
0 votes
0 answers
12 views

How can I align COLs in a ROW with different heights to start from the top and not centered?

This is how the problem looks visualized, the password col has a height of 173 but the email has no height and react somehow centers them. I don't know how to center them from the top so that they are ...
unstuckMe's user avatar
0 votes
0 answers
16 views

Access Bootstrap 5 variables on Rails 7

Using Rails 7 and Bootstrap 5. I want other SCSS to be able to access Bootstrap variables, so that I don't have to redefine again. But with the following setup, I get Error: Undefined variable:. Here'...
Victor's user avatar
  • 13.1k
0 votes
0 answers
24 views

Bootstrap 4 adding space above DIV tag with PHP include

I have found a very frustrating issue! When I use a PHP include for a file that has a DIV tag, a line space is added above. For testing I've stripped out everything as follows: <!DOCTYPE html> &...
Mat O'Marah's user avatar
0 votes
0 answers
8 views

How to use bootstrap ScrollSpy with anchor using dots?

Context In the development of the pydata-sphinx-theme we use extensively twitter bootstrap to build the UI of a Sphinx generated documentation. When documenting Python API, the Autodoc plugin (that ...
Pierrick Rambaud's user avatar
-1 votes
1 answer
15 views

How to dequeue bootstrap for footer in wordpress

I want to add custom code(containing tailwind classes) for the footer in my WordPress website. But the browser applies css of these classes as per the bootstrap stylesheet. So, I want to exclude/...
Fuaad's user avatar
  • 302
-1 votes
0 answers
10 views

Tailwind classes not working properly with the cdn method

I want to use tailwind classes in my wordpress website and I've opted to choose the cdn method for this purpose. But, the tailwind classes are being considered as bootstrap classes by the browser. I'...
Fuaad's user avatar
  • 302
-2 votes
1 answer
41 views

Cell In[49], line 9 consumer_secret = 'RI9RAV5RC6cXzZHAiuDN1vTTGXaFGLNYplpffntpLlVkTN3PWw' ^ SyntaxError: invalid syntax

import logging import tweepy logger = logging.getLogger("twitter") twitter_client = tweepy.Client( consumer_key = 'MY_CONSUMER_KEY' consumer_secret = 'MY_CONSUMER_SECRET' access_token =...
Fatih Mehmet Koç's user avatar
-1 votes
0 answers
29 views

Convert a bootstrap website into mobile friendly [closed]

The below is code for https://cheery-taiyaki-c36a23.netlify.app/. Currently it looks very small on mobile. What changes to make it look better in mobile as https://www.karmdelhi.com/m/ looks. My ...
Mike's user avatar
  • 1
0 votes
0 answers
14 views

Using Bootstrap to a Specific Component for Offcanvas Usage Without Affecting the Overall Layout

Yo Guys, I'm working on a react project where I've already set up a solid layout. Then, I added Bootstrap to implement an offcanvas component, and it works well. However, I encountered an issue when I ...
Jannik Stach's user avatar
-1 votes
1 answer
28 views

How to style bootstrap multi select active option bg color

I would like to change the background-color of bootstrap multi select active option. For some reason it's now red. Code: <select className="form-select my-select" multiple ...
Selina's user avatar
  • 3
0 votes
1 answer
38 views

Grid Bootstrap container keeps overflowing to the right and I can't figure out why

I want a margin on the left and on the right of the grid container so it doesn't touch the borders of the webpage - but even though the margin on the left shows up just fine, the margin on the right ...
Matheus Caetano Rocha's user avatar
0 votes
0 answers
20 views

How to change the color of contextual color classes in boostrap 5

I am using Boostrap 5 in my project and I am using elements with classes like btn-primary, text-success, etc. In Boostrap the -primary class is represented with blue, -success is represented with ...
Ernesto Ruiz's user avatar
0 votes
1 answer
24 views

HTML: center span in div but expanding to fill all the available space in div

Please, look at this short HTML snippet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-...
Mark's user avatar
  • 4,408
0 votes
1 answer
34 views

style bootstrap with a row with multiple inputs

I am looking for input/assistance with how you would style using bootstrap 5. I created a codepen: https://codepen.io/korazy/pen/xxmWGOx Issues: I have a row with text that my wrap, bootstrap now ...
user3720435's user avatar
  • 1,433
0 votes
1 answer
30 views

How to fix mobile dropdown from bootstrap

How it should look (Image link) How it looks on mobile Dropdown increases size of navbar on phone version. Here is a code: <div style=" background-image: url(https://i.imgur.com/408H5PI.jpg); ...
Vracar's user avatar
  • 1
-2 votes
0 answers
12 views

React route component null of 'UseContext'

I have the following error on the Routes, the page is blind. What is the problem? How I can make the Routes working?[enter image description here](https://i.stack.imgur.com/M9zcJ.png) I've tried to ...
Junior Front-end's user avatar
0 votes
0 answers
6 views

Bootstrap .container-sm class has different margin in page with vertical scrollbar and with no vertical scrollbar

I have two pages, one page content are little longer than the other. So, in one page there is vertcal scrollbar at side and other page has did not. I am using Bootstrap class .container-sm in both the ...
Sandeep Banoula's user avatar
0 votes
0 answers
18 views

Position-sticky is not working with Bootstrap 4 elements

I'm using the .sticky-top bootstrap class inside the child element of the column, which is inside a .row element. This way, the .col class element is taller than its child, and should theoretically ...
peikado's user avatar
  • 75
-1 votes
1 answer
47 views

how to Implement Bootbox.js popup in My React Application

I Wanted To Implement Bootbox Popup In my reactJs Application. BootBox.Js Link:- https://bootboxjs.com/examples.html If Any one already Implemented this kind of Model up, Please Share. I have done ...
chandu komati's user avatar
-1 votes
0 answers
7 views

Boostrap yamm navbar menu not hiding on narrow viewports

I have an issue with the Bootstrap yamm navbar when the viewport size calls for the mobile version. Currently, the nav appears below the header and works fine. As the viewport gets narrow, the menu ...
webguy's user avatar
  • 660
-1 votes
1 answer
27 views

Can I use Bootstrap 5 with Vue v2 and Bootstrap-vue Components?

The project that I work on is created with Nuxt v2 (Vue v2, Bootstrap v4, Bootstrap-vue). The project uses bootstrap-vue components like: <b-navbar toggleable="md" type="dark" ...
monny's user avatar
  • 107
1 vote
1 answer
26 views

My dropdown menu will not display the given list items given the following code

I can't figure out why the dropdown menu will not display the list items given the following code. The dropdown button should display the three list4ed items on a click. I'm using Bootstrap and the ...
Space Aliens's user avatar
0 votes
0 answers
7 views

How to integrate FormValidation's external plugins with Metronic?

I'm working on a Wizard Form using the Metronic framework. Metronic includes the FormValidation library, and states so in their website In my project I can find the file in \assets\plugins\global\...
Patricio Siquot's user avatar
0 votes
0 answers
38 views

React dropdown, multiselect & search without intermediate closing (on state change)

I have a project with React and Bootstrap. Now I have a 'regular' dropdown where I can select 1 option and it closes. What I want is: to be able to select multiple options, but not close the dropdown ...
Jeroen's user avatar
  • 2,021
0 votes
0 answers
20 views

Bootstrap - "text-center text-md-left" - the break point is not working and text always is aligned to the center?

I'm just learning and using bootstrap to practice, however I ran into an issue. I have this div, and I want when the display is small then the text should align to the center, on bigger screens it ...
SPRK's user avatar
  • 1
0 votes
0 answers
23 views

Compile Bootstrap CSS like TailwindCSS to have only the used classes CSS

We have some projects that use Bootstrap and we have been including the whole Bootstrap library. This has been adding a lot of extra CSS that we don't actually use to the page load. We've also ...
Paul Sheldrake's user avatar
0 votes
2 answers
46 views

Create three inline blocks and freely place elements inside them without affecting other blocks

I am trying to create three blocks with set height and width, aligned on top/bottom and also place couple elements inside them. My problem is that anytime I place additional DIVs into one of the ...
bracko's user avatar
  • 252
1 vote
1 answer
141 views

Is there a way to `@extend` bootstrap classes in SCSS without having to import bootstrap itself?

I have the following custom class defined in a sample.scss file. .custom-class { @extend .rounded-pill; @extend .border; @extend .bg-light; } When I compile the code, I get the following ...
Jay's user avatar
  • 1,196
0 votes
0 answers
27 views

Collapse the vertical menu after selection has been made

I have a collapsible vertical menu and what I would like it to do after a selection has been made, collapse the vertical menu. Anyone see what's wrong? $('.RoomID').click(function() { console....
DCJones's user avatar
  • 3,121
-2 votes
0 answers
14 views

Bootstrap swipe divs on mobile

Hello I have colmd3 divs on bootstrap webpage. Is there a way to transform this divs to swipeable divs on mobile. Thank you
sipdorus's user avatar
  • 969
0 votes
2 answers
22 views

Display empty value when no results with extra menu item

I have a Typeahead with a custom Menu using renderMenu. I am adding 2 custom Menu items to the bottom of the dropdown menu. One divider and a button. When I don't add the extra items, and there are no ...
tapizquent's user avatar
-2 votes
0 answers
34 views

Divs inside a container behave like inline items

So I have this code for the website I am developing and I faced an issue, where all the browsers display the items inside the container as if they were inline, but they shouldn't be. IDK what is wrong ...
Artem Maksymov's user avatar
0 votes
0 answers
21 views

React Bootstrap 5 Carousel with multi-items CarouselItems

I am learning React+Typescript and am new to Bootstrap and currently working on the task to create a Bootstrap Carousel with multi-item CarouselItems - I want to display on one slide 4 items, side-by-...
Maciej W.'s user avatar
0 votes
2 answers
50 views

Edited navbar not showing in view from laravel and vue project

I have created a new Laravel project with laravel new projectname. so it comes with few options and the setting I chose was jetstream, inertia, api, dark, ssr. However, when I edit the navbar part in ...
anggor's user avatar
  • 77
0 votes
1 answer
16 views

Bootstrap color classes, icons, and dropdown not working

I have been trying to use bootstrap classes like bg-body-tertiary, or bg-secondary-subtle, as well as the dropdown functions and the icons. When I try to test code from the manual it doesn't appear ...
Isabela Ferrer's user avatar
1 vote
1 answer
53 views

Why does SASS compiler adds [dir] at the beginning?

I am trying to compile Bootstrap 5.3 along with custom SASS files. This is what I have @import '../../node_modules/bootstrap/scss/bootstrap'; @import 'other/file.scss'; [data-bs-theme=light] .bg-...
Jay's user avatar
  • 1,196
1 vote
1 answer
26 views

Why Don't My Bootstrap Tabs Not Show The Content In Them?

Ive been trying to use the nav-tabs (https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs) from bootstrap (version 5.2.2) in my angular application but for some reason only the content in the ...
Adedeji Onigbinde's user avatar
0 votes
0 answers
9 views

Bootstrap generate all color tons helpers

I'm using Bootstrap SASS into my project, and I'm customizing it with my own _variables.scss imported before the bootstrap.scss. So, my final SASS file looks as simple as: @import "variables"...
RBFraphael's user avatar
0 votes
0 answers
12 views

Bootstrap 5 grid system with ngPrime Splitter control

I am using ngPrime's Splitter control on the page, splitter divides the page into two halves. On both sides of the pages, I will have some HTML elements in Bootstrap's grid system. What I am noticing ...
ritu_o0o's user avatar
0 votes
1 answer
47 views

How to show bootstrap range's min max value before and after range slider?

I'm using classical bootsrtap css to make a range. I'd like to show the min and max value as pointed in the picture above. Just as a text explanation [min value] [range bar/slider] [max value] as a ...
akikara's user avatar
  • 214
0 votes
1 answer
18 views

Bootstrap row, column is not stretched to the 100% div height inside when there's heading

Could someone please explain this behavior? https://stackblitz.com/edit/jfiypj?file=index.html As you can see, when a DIV has a height of 100% and a heading on top of it, neither the row nor column ...
fuji's user avatar
  • 317
0 votes
1 answer
87 views

jQuery can not get backdrop & keyboard working

I am trying to disable background once a popup is open. I have tried a lot of stuff from here and other places. Everything else is working with no problem. // HAVE TRIED ALL OF THESE NONE WORK // // ...
Stephen Weaver's user avatar
1 vote
1 answer
55 views

Select Option Over Flow the Web Page When Text More Than 200 Character

This Select Control Overflow the webpage as Shown <div> <select id="animalName"> <option value="hamster">Hamster</option> <option value="...
taha mosaad's user avatar
-1 votes
1 answer
23 views

Bootstrap keep navbar items in line with the site content

I try to have the brand and the dropdown (on the right) in line with the content of the page. The general design is to have one content column which takes col-8 on larger devices and col-12 on smaller ...
sttu's user avatar
  • 1

1
2 3 4 5
2061