Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Import dash_bootstrap_components doesn't work

Hi, I used pip install to install dash_bootstrap_components and it looks well installed. But, when I run my code this is the error:

import dash_bootstrap_components as dbc
ModuleNotFoundError: No module named ‘dash_bootstrap_components’

Help! I don’t know what is happening

You probably start you dash application with different python executable than you used to install dash-bootstrap-components.

1. Check your python executable

  • Put this on top of your python script (app.py or any other) and run it
import sys
print(sys.executable)
  • Look at the console, and then take the path to the python executable

2. Install with the python executable

  • To force the installation to the right place, you can run pip as module (python -m pip instead of pip):
<path_to_python_executable> -m pip install dash-bootstrap-components

After that, everything should work fine. You can also check the site-packages folder near the python executable you are using to run your app. If it has a folder called dash_bootstrap_components, everything should work.

It works for me! Thank u so much!

1 Like

Hello, Im not really understanding what your saying here? I cant seem to get dash-bootstrap-components installed?? I did the pip install, conda… and it didnt work? i am trying to build a multipage app and I have app.py which is the basic file ( probably not the best way to say that) and index.py which is where im running the app.layout = stuff… im trying to covert a multipage app with tabs on top to a sidebar using bootstrap components in it and cant get the imports to work… Can you elaborate on this explanation please? What do you mean by part 2 here? I put import sys and print and im not seeing/understanding what to do here? This is the print out in my console when starting it after putting that at the top of the index.py and app.py file and firing up the app…

The path to your Python executable is printing at the top of your screenshot, so to install you would do

/Users/edwardmcmillan/opt/anaconda3/bin/python -m pip install -U dash-bootstrap-components

Hi, Thanks for answering me, I copied and pasted exactly this /Users/edwardmcmillan/opt/anaconda3/bin/python -m pip install -U dash-bootstrap-components

and hit enter and it still doesnt work? It seems to say its is already there/installed but still doesnt work… I get this… and still have the same error (lines underneath import dash_bootstrap_components as dbc )

Thanks for the help! Really appreciate it!

The lines under the import in your editor might just mean that the editor is using a different install of Python than the one you are using to run your app.

If you start Python from the terminal using

/Users/edwardmcmillan/opt/anaconda3/bin/python

and then run

import dash_bootstrap_components as dbc

does it still fail?

Alternatively can you try running the following and see if you get errors?

/Users/edwardmcmillan/opt/anaconda3/bin/python -c "from dash_bootstrap_components import __version__; print(__version__)"

Sorry for not understanding you, but do you mean litterally in my terminal where im running to cut and paste that in there an run it?

/Users/edwardmcmillan/opt/anaconda3/bin/python

put that in and hit enter? ( i have never done that before)

I tried and this is what happens…

then i cant get out of this part… control c doesnt work… im locked in then… the only way to get out is to close the terminal…

I tried the last thing you said and the error is still there…

Ok, from the screenshots I can see that you do have dash-bootstrap-components installed.

To exit the Python interpreter it’s either press Ctrl+D or run exit().

The reason for the underline is likely that the Python extension in VSCode is using the wrong version of Python. To fix that, open up the command palette (Cmd+Shift+P on Mac) and type something like Python: Select Interpreter. You should see the option come up. If you click / arrow + enter that you’ll be able to choose the right one from the list. If you don’t see it you can type the full path from above /Users/edwardmcmillan/opt/anaconda3/bin/python

As a side note, it looks like you’re using conda environments, in which case I would expect the Python you want to actually be something like /Users/edwardmcmillan/opt/anaconda3/envs/ethereum/bin/python. Perhaps that’s the reason for the mismatch?

thanks! I did comand+shift+p and select the version and it doesnt error anymore… now I cant figure out how to use the bootstrap in the app…I am trying to do a multi-page app with an app.py and and index.py… in the examples on the bootstrap page they always just include basic stuff but not multi-page examples…

So when i try to integrate this it all just errors and wont run…

This is my index.py and app.py files… index.py is what i run with python index.py.

do you know how to put the bootstrap stuff in these files?

this is the app.py file

this is the index.py file

I REALLT APPRECIATE THE HELP! … ive been adding several pages and integrating live data into this now…

There’s a number of examples / templates of multi-page apps here that might help.

Can’t immediately see anything wrong with your code, hard to know what the problems are without knowing what errors you’re getting.

Hi, Thanks, sorry to keep coming back to you… just not so easy to use this… The problem with that is the pages are all called using a different mechanism so nothing works… return nlp.layout for example and these examples all use different returns… so how to figure out that part? If i cut and paste from the examples you sent nothing matches the stuff i already had and there is no instructions on how to adapt those parts… and while the bootstrap components stopped the yellow underlying errors it now errors on all dbc even though it says i have installed it and it doesnt error on the top part with import dash_bootstrap_components as dbc…

even if i change these to match my already made pages… ie … return layout.nlp …return layout.live… they dont work…

So, is the return on the app.py page need to be html.p? or can it be the original layout which is what i have returning from the charts/graphs on the individual page? if it has to be html.p… how exactly do i change the layout part in the individual pages?

This also keeps giving an error on indents when all i did was cut and paste from the navbar example you gave me so not sure why this is giving an indent error…

this is how the pages are all called… layout =

the format i was using used this to…

from apps import vgames, global_sales, nlp, guage, live, alpaca

in the example you sent it doesnt have anything like this?

So the file structure has to completely change? It seems like file structure in the examples you sent me wont work with what i had? is there anywhere to see how it should be done with bootstrap pages like this?

Hi, Sorry, This is so buggy its crazy… it is switching by itself from one env to another… and now the error for bootstap components is back…and no matter what i try to do it wont go away… i dont understand how that is possible that this switched env… it defaulted back to a dashapp env and now none of the installs i had done were there so i had to install everything again, and now the bootstrap component wont stop erroring… wow… never had stuff like this happen… I took a break from it and closed the vs code file to start over… so i now started at dashapp env and got that install to stop erroring again at import bootstrap components as dbc… BUT… i cant believe it is doing this…

So… when i comment out import dash_bootstrap_components as dbc… and app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP]). the app runs fine…

BUT… when i dont comment out these… my pages when displayed do really weird stuff! I have this a page with an api feeding live tsla stock data… it displays fine with those things commented out… and the other pages shown also work… fine…screen shots below…

Now, When i dont comment out those two lines w/bootstrap… it does this?

IDK… this is so weird… im not sure how to proceed here… strange…