What is Bootstrap?
Bootstrap is an open-source CSS framework that helps in building mobile-first front-end web development. It comes with lots of templates and CSS classes which helps in reducing our application development time and effort.
Create the Svelte project
npx degit sveltejs/template svelte-bootstrap
cd my-svelte-project
npm install
npm run dev
Create a new project with svelte using the above commands
You can also look up the official documentation for getting started with Svelte - https://svelte.dev/blog/the-easiest-way-to-get-started
Option 1 - Adding Bootstrap via CDN
Bootstrap has a simple CDN link that contains all the bundled CSS and js files needed for your project. This is probably the easiest option to include Bootstrap in your project. Just add the below links to your public/index.html
Go to the bootstrap website and copy the CDN links present. As of writing this tutorial, the latest version of Bootstrap is 5
https://getbootstrap.com/docs/5.0/getting-started/download/
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Option 2 - Adding via Node Modules
You can add the bootstrap as an npm package and add it to your application after updating the rollup config files.
Installing bootstrap package
npm install bootstrap
After running this command, Bootstrap will be added to your node_modules
folder. We need to copy it to the public
folder for svelte. We can automate this using the copy plugin of rollup
Installing rollup copy plugin
npm install rollup-plugin-copy -D
Update the rollup config file
//...........
import copy from 'rollup-plugin-copy'
//...........
export default {
//...........
plugins: [
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
// Add bootstrap files to public folder
copy({
targets: [{
src: 'node_modules/bootstrap/dist/**/*',
dest: 'public/vendor/bootstrap'
}]
}),
//...........
};
//...........
After adding this copy plugin, you can verify the public folder to make sure vendor
folder is created and bootstrap
folder is available.
Most of the config is done. We just have to add the link to these files in our index.html
folder
<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
That's it. Start using bootstrap classes in your application
Join our discord channel for more discussion or questions
Discord - https://discord.gg/AUjrcK6eep
Top comments (0)