Sigil & Bootstrap

Rasyr · 01-03-2024, 09:06 AM

Are there any instructions or guidelines for how to include Bootstrap in epubs made in Sigil?

Yes, I understand that some readers may not support it, but I would still like to know how to do it.

Thank you in advance!

DiapDealer · 01-03-2024, 09:56 AM

You might start by clueing us in as to what "Bootstrap" might be.

Rasyr · 01-03-2024, 10:47 AM

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.

https://www.w3schools.com/bootstrap5/index.php

I did find an earlier thread that mentioned it, but that was like from 5 or 6 years ago.

KevinH · 01-03-2024, 10:59 AM

An epub is not a website in a "box" as epubs require OPF xml documents for control and the Nav and the code to produce is xhtml not html. That said Sigil supports css and javascript (when enabled in its Preferences) so you could try playing around with it. But the number of javascript related e-readers are quite limited.

BeckyEbook · 01-03-2024, 11:05 AM

The previous thread is still relevant. No reader will handle all the capabilities of bootstrap, so most of its features won't be useful.

When creating ebooks one of the guiding principles is KISS (Keep It Simple Stupid!) and using bootstrap for this is the exact opposite.

But if you insist...

You can easily prepare the file itself.
1. download the latest version of booststrap
2. extract the two files (bootstrap.min.css and bootstrap.min.js)
3. add them to Sigil
4. add references to these files in the xhtml file.

It will look simpler like this:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>
  <link href="../Styles/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
  <script src="../Misc/bootstrap.min.js"></script>
</body>
</html>

It doesn't make much sense to me, but perhaps you have a specific target audience for such files and they will only be read on a computer.

Rasyr · 01-03-2024, 11:18 AM

I am interested in some of its built in CSS formatting possibilities, not the javascript side of things. (i.e. short-cutting have to enter all those CSS styles manually...)

Rasyr · 01-03-2024, 11:19 AM

Quote:

Originally Posted by BeckyEbook

The previous thread is still relevant. No reader will handle all the capabilities of bootstrap, so most of its features won't be useful.

When creating ebooks one of the guiding principles is KISS (Keep It Simple Stupid!) and using bootstrap for this is the exact opposite.

But if you insist...

You can easily prepare the file itself.
1. download the latest version of booststrap
2. extract the two files (bootstrap.min.css and bootstrap.min.js)
3. add them to Sigil
4. add references to these files in the xhtml file.

It will look simpler like this:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>
  <link href="../Styles/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
  <script src="../Misc/bootstrap.min.js"></script>
</body>
</html>

It doesn't make much sense to me, but perhaps you have a specific target audience for such files and they will only be read on a computer.

Thank you!! That is quite likely exactly what I need to do!

KevinH · 01-03-2024, 02:03 PM

So all it is a set of pre-done css and pre-done javascript? Why not just create your own css template if not interested in the javascript part.

Rasyr · 01-03-2024, 02:10 PM

Quote:

Originally Posted by KevinH

So all it is a set of pre-done css and pre-done javascript? Why not just create your own css template if not interested in the javascript part.

easier to use pre-made elements rather than try to figure it all out myself.

Plus, this way, I can see what elements will work to see how far I can push thing (one main thing is styling tables and such, since I am planning on putting the table-top rpg I have written into epub format to give gamers another method of utilizing the game.

theducks · 01-03-2024, 02:56 PM

Quote:

Originally Posted by Rasyr

easier to use pre-made elements rather than try to figure it all out myself.

Plus, this way, I can see what elements will work to see how far I can push thing (one main thing is styling tables and such, since I am planning on putting the table-top rpg I have written into epub format to give gamers another method of utilizing the game.

Pushing it is fraught with product returns (is selling).
So many device vendors think they are Burger King ('Have it our way'

) and implement either a portion, not support, or override your code.

Just read a bunch of more recent posts (device forum, Calibre and Sigil) and you will see: does not work on XYZ

01-03-2024, 09:06 AM	#1
Rasyr Junior Member Posts: 5 Karma: 10 Join Date: Jan 2024 Device: none	Sigil & Bootstrap Are there any instructions or guidelines for how to include Bootstrap in epubs made in Sigil? Yes, I understand that some readers may not support it, but I would still like to know how to do it. Thank you in advance!

01-03-2024, 11:05 AM	#5
BeckyEbook Guru Posts: 692 Karma: 2180740 Join Date: Jan 2017 Location: Poland Device: Misc	The previous thread is still relevant. No reader will handle all the capabilities of bootstrap, so most of its features won't be useful. When creating ebooks one of the guiding principles is KISS (Keep It Simple Stupid!) and using bootstrap for this is the exact opposite. But if you insist... You can easily prepare the file itself. 1. download the latest version of booststrap 2. extract the two files (bootstrap.min.css and bootstrap.min.js) 3. add them to Sigil 4. add references to these files in the xhtml file. It will look simpler like this: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title></title> <link href="../Styles/bootstrap.min.css" type="text/css" rel="stylesheet"/> </head> <body> <script src="../Misc/bootstrap.min.js"></script> </body> </html> It doesn't make much sense to me, but perhaps you have a specific target audience for such files and they will only be read on a computer.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
./setup.py bootstrap has been successfully passed	cuser	Calibre	9	12-02-2020 10:03 AM
Recommend an ePub3 using Bootstrap?	SigilBear	ePub	23	02-16-2019 01:19 PM
Using Bootstrap with Epubs	SigilBear	ePub	5	02-06-2017 08:59 PM
Comparison Sigil 0.8.7 & Sigil 0.9.1	r2d256	Sigil	15	12-03-2015 02:38 PM
iplinux-bootstrap failure	Nocturnal	OpenInkpot	1	04-26-2010 03:57 AM

01-03-2024, 09:56 AM	#2
DiapDealer Grand Sorcerer Posts: 27,552 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	You might start by clueing us in as to what "Bootstrap" might be.

01-03-2024, 10:47 AM	#3
Rasyr Junior Member Posts: 5 Karma: 10 Join Date: Jan 2024 Device: none	Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. https://www.w3schools.com/bootstrap5/index.php I did find an earlier thread that mentioned it, but that was like from 5 or 6 years ago.

01-03-2024, 10:59 AM	#4
KevinH Sigil Developer Posts: 7,653 Karma: 5433388 Join Date: Nov 2009 Device: many	An epub is not a website in a "box" as epubs require OPF xml documents for control and the Nav and the code to produce is xhtml not html. That said Sigil supports css and javascript (when enabled in its Preferences) so you could try playing around with it. But the number of javascript related e-readers are quite limited.

01-03-2024, 11:18 AM	#6
Rasyr Junior Member Posts: 5 Karma: 10 Join Date: Jan 2024 Device: none	I am interested in some of its built in CSS formatting possibilities, not the javascript side of things. (i.e. short-cutting have to enter all those CSS styles manually...)

01-03-2024, 02:03 PM	#8
KevinH Sigil Developer Posts: 7,653 Karma: 5433388 Join Date: Nov 2009 Device: many	So all it is a set of pre-done css and pre-done javascript? Why not just create your own css template if not interested in the javascript part.

Advert

Advert