Questions tagged [twitter-bootstrap]

36499 questions
1

votes
0

answer
74

Views

Unable to add a class attribute to the label generated by a radio button input

I have the following configuration: # config/initializers/simple_form.rb config.item_wrapper_tag = :div config.item_wrapper_class = 'form-check' # config/initializers/simple_form_bootstrap.rb config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do...
bitsapien
1

votes
0

answer
114

Views

ng2-bs3 modal dynamic sizing?

I have been using an ng2-bs3 modal for my admin login form, but when the validation message comes, it is overflowing the modal body. How to fix it so that, when the message comes, its size also increases relative to the modal size? Example:
Aditya Vashishtha
1

votes
1

answer
110

Views

Popup UserCreationForm in Django

Can I popup UserCreationForm of Django? I am building a website. When I click on signup page popup signup page needs to show. Right now I have a signup page and login page and they are working but I need to popup them. I am using usercreationform of Django. Can I add Bootstrap and CSS in that form...
Dawood Basharat
1

votes
1

answer
131

Views

CSS slider with link to pop up video

I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated Here is my code
user9150564
1

votes
0

answer
312

Views

Bootstrap Modal doesn't scroll with Select2 dropdown

I have a boostrap modal with a select2 dropdown inside: ....
Kirill Simin
1

votes
0

answer
572

Views

Display form errors (laravel validator) on bootstrap collapse

I'm using Bootstrap 3.7 and Laravel 5.5. I have a form but it is into a bootstrap collapse. Moreover, I'm using Laravel Validator. How it is possible to display the form (which is hide when the page is opened) when there are errors because with the Validator the page is refresh. So I need to open t...
N. Lamblin
1

votes
1

answer
500

Views

Split Bootstrap4 Carousel-item in two

Hei guys, I would like to split each slide in two, one part for picture and one part for description, look at the picture. It's a bootstrap 4 and I didn't find any solution, I just found examples for bootstrap 3 which is not working for me. I used simple grid but didn't work, just pushed descriptio...
Robert Lepen
1

votes
1

answer
296

Views

Angular dropdown disappearing

I'm using Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0. I'm trying to create a dropdown Login Page. The dropdown is working fine, but the problem is that when we click on the content of drop down( i.e input field in this case), the dropdown gets disappear. This is because when we cli...
Aarush Aaditya
1

votes
2

answer
38

Views

float left image doesn't come in center [responsive design]

All I need is the image to be in the left for desktop users and in the center for mobile users. Please Help!!! #name { text-align: center; font-family: cursive; color: orange; text-decoration: underline; text-decoration-style: double; } img { float: left; width: 75%; margin: 0 auto; } #i...
Jatin Gharat
1

votes
0

answer
336

Views

reactstrap + bootstrap 4 beta dropdown won't work

I don't understand why this nav dropdown doesn't work. My reading suggests it might have something to do with adding the react-popper dependency but I don't really understand how this is to be implemented. This is bootstrap 4 beta + create-react-app + reactstrap 5.0.0-alpha.4. Following the react...
D. Wall
1

votes
2

answer
508

Views

Bootstrap navbar not loading properly

I am new to bootstrap and I recently used one of their templates,all works well, but my navbar is not loading properly, it SHOULD look like this: What i Should be getting But it looks like this in both chrome and firefox: What I get and this is my html (only the nav part) Toggle navigation Project...
Aleksi Dragoev
1

votes
2

answer
571

Views

ASP.NET Web Application: changing bootstrap css file results dissapearing nav bar buttoms

I make a new asp.net web application (MVC) in V.S.2017 and then download bootstrap.css from a bootstrap theme provider on web. I change the downloaded file name to 'bootstrap-cosmo.css' and copy it to contents folder. then I replace this line of code in App_Start/BundleConfig.cs: bundles.Add(new Sty...
Seyed Amir Mousavian
1

votes
0

answer
608

Views

For elements with box-sizing: border-box, only absolute content area dimensions can be applied

I added two images to my html page and they're large in size. I attached a screenshot of images for reference. images_full_size I added a dive with a class of thumbnail using bootstrap. Images got smaller and fitted to the Grid. I am unable to change the height of the first image. I attached second...
Daigham
1

votes
0

answer
196

Views

How to make bootstrap thumbnail caurosel responsive?

Hello i am trying to make a slider using bootstrap(thumbnail slider) and it is sliding but i want to slide one by one column (like first column: 1-2-3, second: 2-3-4, third: 3-4-1 and so on) but don't know where i am misleading, please help me out to make it. hints: in initial it will show column: 1...
Abhishek Rawal
1

votes
1

answer
202

Views

Bootstrap 4 Modal will not close after using jquery .load

I have moved to Bootstrap 4 beta 3 but I am facing an annoying issue with modal; the modal after it shows will not close what ever I click. The Modal remote has been removed with BS4 so I used jquery .load() to load the modal contents once the button is clicked. Here is my main page: Projects List t...
J. Hamdan
1

votes
1

answer
27

Views

How to not change the layout when zooming in with Bootstrap

I'm using Bootstrap and here is my code : Testing stuff index profil forum news logout Here is the render when I'm not zooming in : Here is the render when I'm zooming in : As you can see, the layout is all messed up. I would like that the buttons stay in place. Here is a good example of what I'm t...
BronzoDev
1

votes
0

answer
24

Views

Nav-bar drop-down drops down then collapses immediately

It is a flask app. I got the theme from here. It is asking for more details and I am unsure what I can provide. It is pretty simple. The drop down just drops down for a sec then collapses. I have posted the relevant code. Is it something with the order of the links to the CSS or JS? Here is the main...
MrWizard
1

votes
2

answer
701

Views

bootstrap 3.3.7 tooltip is not showing properly in angular 4 app

I am working on an Angular 4.2 project and implementing bootstrap 3.3.7 tooltip but my tooltip shows as plain text and not like 'bootstrap' tooltip. I have installed Jquery and bootstrap ( it does have tooltip.js as well). I am importing bootstrap css and js file in the angular-cli.json as well. But...
Akash
1

votes
0

answer
17

Views

How to Navigate to a New Page and a Specific Section of a Bootstrap Carousel in AngularJS

I have a page that uses an AngularJS controller (Ctrl2). This page has a button on it that is supposed to navigate the user to another page with a completely separate controller (Ctrl1) and then to slide 1 of a carousel. How can this be done? Cshtml View for Ctrl2: Controller 2 Go to Controller 1, S...
crackedcornjimmy
1

votes
1

answer
40

Views

Issue with jQuery 'combo button' click handling

I'm looking for some help with a button interaction I'm putting together. The idea is that the user will click the 'RESET' button, and then have to cancel or confirm in order to reset a form. The .replace() methods are working as expected, and my 'RESET' button becomes a 'CANCEL' / 'CLEAR' combo bu...
JRiggles
1

votes
1

answer
120

Views

AngularJS + UI-Grid + Bootstrap tab + Application Performance

I am using bootstrap (uib) tabs, angular 1, angular-ui-grid. Each tab contains a single grid and each tab can also have sub tabs. I am facing sever performance issue in application. Data nature - Tree structured which can not be paginated. And size could be in MB's. I tried 2 approaches: Approach 1:...
Vipul Goyal
1

votes
0

answer
422

Views

R flexdashboard side-bar menu

I was wondering if its possible to recreate a shiny-dashboard like menu in flexdashboard? I'm using flexdashboard with crosstalk. In the current setting I'm having too many inputs in the sidebar. So basically, I'd like hide them like submenu items in foldable menu items. Any ideas how I can pull t...
Prometheus
1

votes
0

answer
606

Views

How do I add the Bootstrap Country picker plugin to select a country with flag?

I created a query builder where users can select a country. It's working fine: I want to use the Bootstrap Country picker with flags instead of typing all the countries' names in a list. $('#builder').queryBuilder({ plugins: [ 'bt-tooltip-errors', 'not-group' ], filters: [{ id: 'country', lab...
JuniorDev
1

votes
0

answer
287

Views

React-overlays Affix doesn't work inside a scrolling element

I'm using AutoAffix (https://react-bootstrap.github.io/react-overlays/#affixes) inside an overflow: scroll container, and it doesn't update its position at all. Looking at the code, it appears that they only set a listener on the window itself, so it doesn't fire when my div is being scrolled - and...
riv
1

votes
0

answer
91

Views

Auto adjust position height based on other panels height Bootstrap

So, i am pretty new to programming, and i've stumbled into this problem: i have some collapsible panels which are auto positioned beautifully, but they are on the same row: when i open a panel, all under side panel translate towards the bottom. I want them to readjust their height position to where...
Anonymus
1

votes
1

answer
305

Views

Header misalignment

I have a problem with jQuery DataTables, the problem is that when a table has horizontal scroll bar, and the width of the data table is increased, then the header of the data table is not aligned properly with the body of the data table. This is the datatable before resize the width, it is normal: T...
Imad Abu Hayyah
1

votes
1

answer
276

Views

custom select with popover, change color when open

I've created a custom select with a div and ngbPopover. Im stuck on how to style my 'select div' when the popover is open. My select div should get a different border color when somebody clicked on it and thus the popover with all the options is open. Whenever somebody clicks anywhere else and thus...
Stoffel
1

votes
0

answer
58

Views

Nested ListGroup with ELM

I'm using the Bootstrap package for ELM (http://elm-bootstrap.info/listgroup) and it's working fine, but I can't figure out how to do nested list group. Simply puttin ul in li in ul seems to make ugly unclickable inside list with invisible text, which is not ideal. I guess Accordion would work inste...
Ulrar
1

votes
1

answer
187

Views

Bootstrap input custom width in form-inline

How do I properly make custom width input in the input-group? So that the various devices worked well. My code works in PC, but in mobile not. .someClass {width:550px;} @media (min-width: 768px){ .form-inline .form-control { width: 100%; } } Send
Mateusz Bacławski
1

votes
0

answer
47

Views

move to next tab only if i get json response as true?

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js This is the jQuery I am using to move to another tab. So, how can I apply this in my vue.js script. I need to move to next tab only if I got the response as true if (e.status) { alert('Success')...
coder
1

votes
2

answer
1.9k

Views

Get Bootstrap theme into React app

I have a bootstrap theme with many CSS files. It is responsive and I want all the current styling for UI elements. However, I want to build my app out as React components only, What is the most efficient way to do this? How can I use the bootstrap theme's CSS files while recreating it in React?
JohnSnow
1

votes
2

answer
140

Views

are bootstrap grid breakpoints usually just enough, or is it more common to make other breakpoints?

The grid system as I understand xs = 0-767 pixels sm = 768-991 pixels md = 992-1199 pixels lg = 1200 pixels and up so, don't you guys feel like the xs class is completely not small and definitely not extra. I'm thinking of making a tiny breakpoint, and want to know is it common to do this or is ther...
Adel Abdellatif
1

votes
1

answer
351

Views

How to create a sub accordion?

I created accordion links on my site. How to create a sub accordion ? thank you Here is my html code : Ses contenus {{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }} Les annonces {{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }} {{ drupal_view('profil_page_contenu_utilisa...
3cfe5693
1

votes
1

answer
31

Views

Why won't my iPhone modal or form elements work unless they are positioned at the top of my iPhone screen?

Very hard to even properly phrase this Q. If you go to http://druvocals.com and scroll down the title 'IT'S OH, SO EASY', you will see a graphic and then 'Choose your options'. Under that is a 'Learn more' link which is a modal trigger. Works fine on Desktop and my Android phone, but the link only...
bootstrapper
1

votes
1

answer
243

Views

Using JQuery to trigger an event from Bootstrap Scrollspy

I am trying to capture the event of Scrollspy in order to run a function. Scrollspy is working to change the activate link on the navbar. But I am unable to capture the event to use it elsewhere. This is a snippet of the code: $(document).ready(function(){ $('body').scrollspy({target: '#navbar', off...
phoenixson
1

votes
0

answer
126

Views

How display a filter exposed when the accordion link is open?

I use Drupal 8 and Bootstrap 3 on my site. I created accordion links using the views on this page: https://www.s1biose.com/profil/mathieu Each view has an 'Exposed Filter' block, how do I display filters when an accordion link is open, and how is it hidden when an accordion link is closed ? Here is...
3cfe5693
1

votes
1

answer
177

Views

Printing Charts in Internet Explorer Rendered By Angular-nvD3

I am using Bootstrap v3.2.0 for laying out 3 graphs created using Angular-nvD3. I am trying to render the page for printing. I have some modified CSS in the @media print rule. Everything renders properly for printing in Chrome, but the charts do not resize for printing in IE 11. I have tried to trig...
B-Ray
1

votes
2

answer
34

Views

Bootstrap Place Image Above Hyper Link

I am trying to place the image above the text content. I.E something like below https://i.stack.imgur.com/5L4FG.png .button-link { background: #DBBC26; border-radius: 4px; color: #ffffff; display: block; font-size: 14px; height: 60px; line-height: 60px; text-align: center; width: 190px; fo...
muthukrishnan91
1

votes
1

answer
32

Views

Unable to position carousel next to aside

I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move? html: Whats p...
Ike Nwaogu
1

votes
0

answer
41

Views

Bootstrap v4.0.0-beta.3 carousel + responsive images maintaining aspect ratio

I use Bootstrap v4.0.0-beta.3 and I try to build a slider using bootstrap carousel component. I have a problem with forcing the carousel to make images to cover the whole visible screen while keeping correct image aspect ratio. Here is my code: body { font-family: 'Roboto', sans-serif; font-size:...
Jacek

View additional questions