bredchosting.com logo 125x79
Example: mywebsite.com

Bootstrap: A powerfull Framework all built into Joomla By default

Details
Parent Category: Tips & Tricks
Category: Basic WebDesign - Tutorials
Bootstrap: Learn my useful tips

Joomla 4 comes packed with features by the core version. One of these features is the Bootst6rap Framework, which Joomla has added by default.

Bootstrap has been around since 2011 and part of Joomla since version 3. The latest version, 5.1, is prebuilt into Joomla 4. When this is said, most of Joomla's core doesn't use it by default. Read more here about how to use it in a Subform.

Best features of Bootstrap:

Benefits of using Bootstrap

Bootstrap is a Framework that is known by developers to be easy to use and, at the same time, offer speed and maintainable code. Bootstrap is by default installed in Joomla 4, the version to this date is Bootstrap 5.1.3, but I believe it to become updated in future releases.

Colors

Using the standard colors in Bootstrap is very easy, these classes are as follow: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white, .text-black-50, .text-white-50

Witch will show as follow: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white, .text-black-50, .text-white-50

Cards

Cards are the modern way of displaying ranges of content that often fit together. Examples of use cases that use cards can be pricelists, news, and the site's footer. By default, cards are not responsive, but by using some easy CSS rules we can make them responsive.

Lists

We all use lists in web development, but the default bullet list looks awful and retro in my eyes. We can all style our asses off, but the lists will look the same. Bootstrap offers something better than the plan lists. By using .list-group as a class in the ul or ol element, and .list-group-item in the li element you get a better-styled list. See below:

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Display settings

 In the display setting, you decide what to show on different displays like desktops, tablets, or phones. So based on the classes you have set in your content, you can manipulate how content is viewed on the devices. The predefined classes are: .d-sm-block, .d-md-block, .d-lg-block, .d-xl-block, and .d-xxl-block. These have these breakpoint sizes ≥576px, ≥768px, ≥992px, ≥1200px, and ≥1400px, you can read more about Breakpoints here. .d-none is used to hide all by default, which is why you always include the class .d-none first every time and the others after because it resets what is to be shown to nothing.

 A combination of these is necessary to get the best result. These combinations can be: .d-none .d-md-block .d-xl-block, Wich means you only display it on specific screen sizes.

If you use it on your modules, you can control what is displayed on which devices. Usually, you set this under the Advanced tab and "Module Class", but for the menu module, you must put it in the "Menu Class" in the advanced tab. This means you should have more than one module to control when to show what.

Margins & Padding

Using padding and margins in Bootstrap is relatively easy to work with. By default, Bootstrap offers ranges from .25rem to 3rem. For margins you simply use "m-", and padding is done by "p-" represented by a number from 0-5, where 0 is no margin/padding. If you want to specify the sides, you use (m/p) t, b, s, e, x, or y, representing top, bottom, sides, left, left and right, or top and bottom. You can read the full explanation here.

 MORE WILL COME LATER!

Comments wanted

- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

No comments

Leave your comment

In reply to Some User

  • Introduction to Joomla Content Editor (JCE)

    The Joomla Content Editor (JCE) is a powerful extension designed to simplify and enhance content creation within the Joomla content management system. Joomla’s default editor options can be limiting, especially for users who need more control over...

  • Joomla is a widely-used, open-source content management system (CMS) recognized globally for its flexibility, scalability, and ease of use. It powers millions of websites ranging from personal blogs to large-scale corporate portals and government websites. Joomla provides a robust framework that...

  • one name consistently stands out when discussing Joomla website backups: Akeeba Backup. Developed by Akeeba Ltd.. Whether you are managing a personal blog or a commercial enterprise website, safeguarding your data is paramount, and Akeeba Backup rises to this challenge with robust features,...

  • Creating a form using RS Form in Joomla 5 is a straightforward process.

    Follow the steps below to create your form easily:

    Step 1: Install RS Form

    1. Log in to your Joomla 5 administrator panel.
    2. Navigate to Extensions > Manage > Install.
    3. Upload the RS Form package file and click on Install.

    Step 2:...

  • Discover the truth behind Joomla!, the renowned content management system empowering countless websites globally. Unraveling prevalent misconceptions, this article delves into Joomla! 's functionality and user-friendliness to offer valuable insights. By debunking the top ten myths surrounding...

  • The Failed Login Attempts plugin gives you an overview of your failed logins, but you can make it even better by applying a simple override. The override provides a link to more information about who has tried to log in, and you can therefore use other extensions to block the user or take...

  • You’ve probably heard that Joomla is a “free” platform. That’s true, but it doesn’t tell the whole story. You can download the software for free, and you can host Joomla sites for free on specific hosting platforms. However, if you want the best possible performance and security, you’ll need to...

  • Subform fields are mighty, but did you know they look like a list? - Here, I will show you how you can spice up the look of your Subform.

    Although Subforms are not a new feature in Joomla 4 but were available already in Joomla 3, in Joomla 3, they were introduced as "Repeatable-Fields". But...

  •  In Joomla, it is relatively easy to create CSS overrides. If you would like to change the color of the Invalidate Cache button, you can read on.

    How to create a CSS override in Joomla 4 Administrator (Atum - Template)?

    Joomla is built with the intention of user customization of how it looks. CSS...

  • In Joomla 4, we were introduced to “subforms”, which are great for creating more user-friendly fields for your articles or page, containing the fields in the subform.

    The problem is that when you create a subform, the fields in the subform are divided by a comma. This doesn’t look good on your...

  • With the ability to use extensions in Joomla, it is often prevalent to install more extensions than necessary; this will usually result in a slower site. So here are my recommendations for the ten best Joomla extensions every Joomla site should have.in 2023.

  • The backend of Joomla can be very boring to look at. You can customize it as you like, by adding and replacing modules on the page.

    When you install the Joomla 3.x out off the box, you get two backend templates preinstalled, the main and mostly used template is Isis, this will be used in this...

  • JCE Editor is the best and most used Editor in Joomla; only TinyMCE as the core editor can beat it. Every Joomla site should have the JCE Editor installed because it is free and easy to use.

  • Having a good web hosting solution for your sites, either it is static or based on a CMS like Joomla, WordPress, or others, you have a lot of considerations to take into a factor. I will try in this article to guide you in the right direction towards modern hosting in 2022.

  • When you have a new Joomla Installation, the most annoying thing is that it doesn’t work as you would prefer. You may end up spending hours after hours trying to find the fault but end up banging your head in the wall. Here are 3 common reasons why your site Joomla site isn’æt working.

  • Is it possible to do things in Joomla Backend that is considered a hack! This tip from Basic Joomla is the answer, Yes!, there are several hidden possibilities in Joomla if you put your fingers into it.? - Here is how to use a hack for doing better Menu separator in Joomla. Here are two ways to do...

  • The dark mode is the new Black, and it keeps your eyes from getting light exhausting. And it also looks great in the browser. The Dark mode is not native in either Joomla 3 or Joomla 4 (as of my knowledge). But there is a solution if you don’t want to use a plugin for your browser. You can simply...

  • One of the most common mistakes when creating a new Joomla site is not securing the Joomla-site both with Backup and Security Extensions. Having up-to-date security is essential for every site on the Internet, whether it’s a plain HTML site or a complex CMS system like Joomla or WordPress offers. But...

  • There are many Extensions for Joomla, both free and with a paid license. But there are a few that should be mandatory for every installation of Joomla. I will here make a list of those I think is essential when you start a website.

  • In Joomla, it’s possible to use CSS more effectively than most people realize. You can, if wanted personalize each page just by adding a CSS class to the menu link.

    Joomla offers in most modern templates the ability to target either the title or the page’s alias. It makes customized CSS very easy,...

  • Let's state it once and for all, the backend in Joomla is quite boring, but what if you can give it a more interactive and interesting look. This is quite easy to do using the backend modules and CSS. 

    The reason for this article offsprings from a Youtube Video that shows the benefits of haveing an...

  • Is it possible to make content sliders using pure CSS & HTML only? - Read through and find out more. I will show you some smart tricks that make an awesome reusable slider using only HTMl & CSS.

    Have you ever written a long article with mutch specifications inside? - These articles have their way to become...

  • <

    CSS has from the age of the Internet been a part of doing websites. It is an easy but useful way to design an article. There are several ways to write CSS in Joomla, you can use an external file to store all CSS codes in, you can use an extension to include the code, or you can write CSS directly in the content. In this article, I will give some look into how I do it.

    In this article, I will show you three different ways to use CSS in an article. The easiest thing is to use an extension to add CSS to the article. There are several extensions in the JED (Joomla Extensions Directory) that gives this opportunity. One of the popular is Sourcerer from Regular Labs. But its also possible to do in-line CSS coding in every article, but this can be very ineffective in large articles, the third and maybe most used is to put the CSS codes into the template as eighter an external file or in the CSS capabilities of the template itself. In modern template-Framework is this common, the disadvantage of this is that you always need access to the backend to add extra CSS in your site.

    W3C CSS verifiedW3C CSS verified: W3c.org is setting the standards for CSS

    1 Code directly as you go (Hard coding the articles)

    If you prefer to do the CSS coding inline as you write an article, you must bear in mind that you will NOT be able to reuse the CSS on any other articles and you must repeat the same thing for every content with the same code. This could look like this:

    <a href="/home" style="background-color:#ff0000;color:#ffffff;">Home</a>

    This will output: Home

    2. Use an external file

    If you use an external file as a CSS source, it is normally located under the css folder in your template directory. And its usually called custom.css or user.css, the downside with this is that you need access to either FTP or bee logged in to the backend as a Super Administrator.

    3 Use an extension to add CSS code in the article

     If you want to use an extension to insert CSS in an article, you can not reuse the CSS codes without having it in every article that contains the same style.

    What do I recommend?

    A combination of the option 2 and 3, will give the easiest result and you can standardize some of the CSS styles in a file and add styles in that applies to certain articles at one addon at the end of the written article.

    Comments wanted

    - LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

  • Have you ever made a website with Joomla and you are getting the title "Home" with a large h1-header-tag? You can either hide the tag completely on all content, or you must specify it to be hidden on every page/article you make. There is a third and maybe smarter way to do this. 

    Joomla Menu options

    When you add a...

  • Have you ever been frustrated by styling a page for then realize that every image contains a white line underneath, I saw this trick on Youtube and tried it with Joomla. The result was that line disappeared. This issue resides from the early internet when we've to use inline images in the text.

    IN...

  • When you are about to change passwords in other ways that it's intended to do, you should always take in mind that it always is a security risk. You should therefore use extra care when you need to use these steps. These ways work in Joomla 2.5, 3.x, and 4.x. The tutorial is based on Joomla Docs.

  • A template is the holy grail of a CMS-system; it lays out the structure of your website. But it's always possible to tweak the content and make it look better. All Modules, Components, or Plugins in Joomla can be changed using overrides.

    Though many sites may look good with the Core template or a...

  • One of the most important things to have in mind when you deploy a new website is Backup policy. Akeeba Backup is a free Component from AkeebaBackup, which allows you to do secure backups and maintaining them for your Joomla site.

nordvpn

Login Form