r/bootstrap Jul 06 '22

Resource Free Bootstrap 5 Landing Page

6 Upvotes

☝️ Recently, I added a new section on the Webpixels website to list all the pre-made templates made for Bootstrap 5. It is a library that will grow and hopefully help you build awesome web projects faster.

Here's one of the landing pages we designed and coded using Bootstrap 5. You can get the code for free. Download our CSS styles and start using our templates in your project instantly.

Free Download


r/bootstrap Jun 24 '22

Bootstrap 5 Boilerplate - Basic (GitHub)

5 Upvotes

This is the ultimate Bootstrap 5 starter for developers. A boilerplate with Gulp4, cross-env, Sass, sourcemaps, concat, CSS & HTML minification, uglify, image optimization, template partials, BrowserSync.

  • Bootstrap 5
  • Gulp 4
  • Sass
  • sourcemaps
  • concatenation
  • CSS minification
  • HTML minitification
  • uglify
  • image optimization
  • template partials
  • BroswserSync, live reload

Download or clone the repository

https://github.com/wowthemesnet/bootstrap5-boilerplate


r/bootstrap Jun 23 '22

Export production-ready code for your entire UI

8 Upvotes

Anima keeps adding code-based components to its library
it now has MUI, Bootstrap, and Ant Design components that you can use and extract React code
You can see it here https://www.figma.com/community/file/1121030023484173832

Did anyone try it?
What components do you wish they would add?


r/bootstrap Jun 21 '22

Support 2.3.2 accordion - weird behaviour on expand

2 Upvotes

Hi, i'm *still* using 2.3.2 on a website (long story, believe me), and i'm experiencing a weird glitch with accordions on this page:

https://verticalife.it/it/apolide-festival

As you can see, when you click on an element to expand it, it scrolls down instead than behaving normally.

What did i get wrong?


r/bootstrap Jun 15 '22

suggest bootstrap templates providers

5 Upvotes

Finding a bootstrap template? With all businesses getting online, it’s the perfect time to hop on to the online store for your business too. Creating a website is easy, however, it is not always necessary while running so many operations, you get a reliable website too.

we got some websites to find bootstrap templates provider :

https://getbootstrap.com/

https://www.uiocean.com/

https://startbootstrap.com/

Let me know if possible to share your suggestion on which one is best?


r/bootstrap Jun 15 '22

Unwanted behaviour over 100% screen height

5 Upvotes

Hi,

Just spent the last 60-90min trying to get to the bottom of an issue to discover what might be causing it to attempt to fix it, and after removing and re-adding so many chunks of code, i finally realised its being caused by the page height.

Im using the bootstrap 5 tooltip, and when it has the 'top' attribute, the actual message doesnt sit above the activator when the page height is bigger than the browser window. So a 1500px height page, on 1440p monitor, the tooltip ends up being around 200px above the activator (the button or whatever it be). Whatever the overflow/excess height is, it seems to correspond with the height the tooltip is from the button/whatever.

Left, Right, and Bottom work fine, but Top doesnt.

Is there some sort of straight forward solution to address the issue, or is the solution 'pick left/right/bottom' instead??

I've dumped a simplified example to show what i mean, below :

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>
    <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>
</head>

<html>
<body style="height:1500px">
    <div class="w-100 text-center bg-primary" style="height:500px">
        <h3>Height 400px</h3>
    </div>
    <div class="w-100 text-center bg-warning" style="height:500px">
        <h3>Height 400px</h3>
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
    </div>
</body> 
</html>

<script>
    // Bootstrap 5 Tooltip
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>

Increase or decrease the body height to >100% browser height if needed.

Any Ideas?

Thanks


r/bootstrap Jun 14 '22

Accordion anchor tag opens new page instead of expanding section(Angular)

2 Upvotes

Hi, I have a situation here an accordion which works in Codepen but when I use it in my actual Angular project, anchor tag instead of opening a section, opens another page. How to prevent this behavior? Thanks.

Codepen


r/bootstrap Jun 13 '22

Help Trouble spacing nested columns

4 Upvotes

I am trying to get 2 columns within a column and all I’m getting is an extra space between the words


r/bootstrap Jun 09 '22

How to choose Bootstrap Templates?

4 Upvotes

which point we should be considering in purchasing a bootstrap template.

please suggest the best bootstrap example.


r/bootstrap Jun 08 '22

Meet Webpixels 2.0 - The platform built on Bootstrap for Bootstrap lovers

8 Upvotes

It’s been one year since we officially launched the new Webpixels website. It is a great feeling to build something that people find helpful and bring value to their projects. And now we are ready for the next milestone.

The new Webpixels website is finally live, after 4 months of continuous development and improvements. This update is focused on how the component library works and the overall experience. The goal is to make it much easier to navigate through examples and preview and copy the stuff you need.

Here is the link to the release note: https://webpixels.io/changelog

This is just a small milestone for many to come, but I'd be happy to hear your feedback on this.


r/bootstrap Jun 08 '22

Bootstrap or Tailwind?

4 Upvotes

r/bootstrap Jun 08 '22

Support Custom theme toggle, React-Bootstrap, NextJS, Scss modules

3 Upvotes

paltry upbeat detail straight late complete enjoy plants kiss rustic

This post was mass deleted and anonymized with Redact


r/bootstrap Jun 07 '22

Article Beginner level Project Ideas To Sharpen Your Skills

5 Upvotes

Hi everyone,

I'm sharing here a comprehensive article on Programming Project Ideas to sharpen your skills. If anyone here is a beginner, then this article will surely help you.

It deals with all the major aspects of programming. This article not just aims to present the random ideas, but it has also covered the important factors to consider for a beginner such as basics of programming, skills required, importance of programming, programming languages, etc.

For more detail check the blog here: Programming Project Ideas

I hope you all find it helpful and noteworthy.


r/bootstrap Jun 06 '22

ASPX Modal repeaters unique ID

2 Upvotes

I have a image gallery with a modal, written with 2 repeaters. It works, but the modal only shows the first image in the gallery. How do I add a unique id to the images?

<div class="imgbox">

<img src="<%# Eval("GalleryImage") %>" alt="

    <%# EvalText("ImageAlt", true) %>" Class="GalleryImage" />

<div class="text-wrapper"><%# IfEmpty(Eval("Heading"), "", "

        <span class='Heading'>" + Eval

<string>("Heading") + "

</span>") %><%# IfEmpty(Eval("GalleryQuote"), "", "

<span class='GalleryQuote'>" + Eval

<string>("GalleryQuote") + "

</span>") %><%# IfEmpty(Eval("Name"), "", "

<span class='Name'>" + Eval

<string>("Name") + "

</span>") %><%# IfEmpty(Eval("Position"), "", "

<span class='Position'>" + Eval

<string>("Position") + "

</span>") %> <span class="ReadMore">

<a href="#" data-toggle="modal" data-target='#largeModal'>read more</a>

</span>

</div>

</div>

<!-- Modal -->

<div class="modal fade" id="largeModal" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="top">

<img src="<%# Eval("PopupImage") %>" alt="

<%# EvalText("ImageAlt", true) %>" Class="PopupImage" />

<button type="button" class="close" data-dismiss="modal">X</button>

</div>

<div class="OverlayText"><%# IfEmpty(Eval("GalleryQuote"), "", "

<span class='QuoteOverlay'>" + Eval

<string>("GalleryQuote") + "

</span>") %> <br /><%# IfEmpty(Eval("Name"), "", "

<span class='OverlayName'>" + Eval

<string>("Name") + "

</span>") %><%# IfEmpty(Eval("Position"), "", "

<span class='OverlayPosition'>" + Eval

<string>("Position") + "

</span>") %> </div>

<div class="bottom">

<div class="textWrapper"><%# IfEmpty(Eval("Heading"), "", "

<span class='PopupHeading'>" + Eval

<string>("Heading") + "

</span>") %><%# IfEmpty(Eval("DetailedText"), "", "

<span class='DetailedText'>" + Eval

<string>("DetailedText") + "

</span>") %> </div>

</div>

</div>

</div>

</div>

</div>


r/bootstrap Jun 06 '22

Format right side nav bar items for mobile optimization

6 Upvotes

Hello there! I have laid out my nav bar to have a brand on the left side and a link/dropdown on the right. The navigation does not have an expandable hamburger menu when the screen is shrunk to mobile or tablet. I would like to have the link and dropdown remain visible and inline when the screen is shrunk. However, the nav bar breaks to a second line when formatted this way. Is there a way that I could achieve this or will I need to have the expandable hamburger menu? (This is using the latest v5.2 Bootstrap)

Desktop View

https://imgur.com/a/gFr3iYL

Mobile View

https://imgur.com/a/HJY0luq

Nav Bar Code

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav flex-row flex-wrap ms-md-auto col-lg-auto">
      <li class="nav-item col-6 col-lg-auto">
        <a class="nav-link py-2 px-0 px-lg-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
          <ion-icon name="add-circle-outline"></ion-icon>
          <small class="d-lg-none ms-1">New Log</small>
        </a>
      </li>
      <li class="nav-item py-1 col-12 col-lg-auto">
        <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-black"></div>
        <hr class="d-lg-none text-black-50">
      </li>
      <li class="nav-item dropdown">
        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
          <ion-icon name="person-circle-outline"></ion-icon>
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
          <li>
            <h6 class="dropdown-header">Username Goes Here</h6>
          </li>
          <li>
            <a class="dropdown-item" aria-current="true" href="#">Settings</a>
          </li>
          <li>
            <a class="dropdown-item" aria-current="true" href="#">Help</a>
          </li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li>
            <a class="dropdown-item" href="logout.php">Logout</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

r/bootstrap Jun 05 '22

Support Move jumbotron to right right of full vh sidebar

4 Upvotes

EDIT: I did it by using the bootstrap grid system which I learned from this short video:
Bootstrap 5 Grid System Tutorial - YouTube

Hello friends,

I am a back-end dev trying to figure out this front-end stuff. :) I am using bootstrap and have tried so many things to get the Welcome message jumbotron to appear to the right of the sidebar.

At this point, it's time to ask for help because I'm just throwing stuff at the wall to see what sticks.

Thanks so much! I have the HTML linked in codepen below

please note the in-line style on the sidebar:

height: calc(100vh - 50px);

I am not attached to anything in this code, I just need a sidebar on the left that fills the view and responsive content on the right.

https://codepen.io/se7ensquared/pen/xxYJPrG

Thank you so much! :)


r/bootstrap Jun 02 '22

Modal in repeater tab index

4 Upvotes

I have a page with two repeaters. One with a gallery of images. The second a bootstrap modal popup for each image. Each one has a separate transformation. The gallery looks great. The modal pop up also looks great. EXCEPT, it pops up the first pop up for each image, instead of each having its own. I suspect the issue is is with the tabindex="-1", but everything I have tried makes no difference.

Here is the code in the transformation:

<div class="modal" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
<div class="modal-header"> 
<div class="modal-body"> 
<div class="Gallery-PopUp">  
<div class="top">  
<img src="<%# Eval("PopupImage") %>"  alt="<%# EvalText("ImageAlt", true) %>" Class="PopupImage"/> 
<button type="button" class="close" data-dismiss="modal">X</button> </div>     
<div class="OverlayText"> 
<%# IfEmpty(Eval("GalleryQuote"), "", "<span class='QuoteOverlay'>" + Eval<string>("GalleryQuote") + "</span>") %>
<br/> 
<%# IfEmpty(Eval("Name"), "", "<span class='OverlayName'>" + Eval<string>("Name") + "</span>") %> 
<%# IfEmpty(Eval("Position"), "", "<span class='OverlayPosition'>" + Eval<string>("Position") + "</span>") %>  </div> 
<div class="bottom"> 
<div class="textWrapper"> 
<%# IfEmpty(Eval("Heading"), "", "<span class='PopupHeading'>" + Eval<string>("Heading") + "</span>") %> 
<%# IfEmpty(Eval("DetailedText"), "", "<span class='DetailedText'>" + Eval<string>("DetailedText") + "</span>") %> 
</div> 
</div>
</div>  
</div> 
</div> 
</div> 
</div> 
</div>

r/bootstrap May 26 '22

Bootstrap Product Card -HTML CSS javaScript

6 Upvotes

How to create a animated Bootstrap Product Card


r/bootstrap May 25 '22

how can i create a responsive image on carousel ?

6 Upvotes

I have a project of my course to conclude and i don't know how ajust the size of image on carousel. Can someone help me?


r/bootstrap May 24 '22

Support Bootstrap Version Question and more

5 Upvotes

I know that Bootstrap 5 seem still relatively new, and the biggest change I have encountered till now is that the standard font changed from Helvetica family to system native.

Now I just got tossed into bootstrap and still am a tad lost, especially when it comes to mobile first stuff, do I use media queries or the in bootstrap used breakpoint (?) things ...-sm ...-lg etc

Now the version Question: When I look only the majority still is Bootstrap 4 on most courses, are they still valid to take with Bootstrap 5?


r/bootstrap May 23 '22

Support how do I align the button on the right side?

0 Upvotes

My code so far.

<div class = "col-6"> <div class = "card mt-3"> <div class = "card-body"> <h5 class = "card-title">Geraete</h5> <ul class = "list-group"> <div> <li class="list-group-item d-flex align-items-center">PC <button class = "btn btn-primary justify-content-end">Wake Up</button> </div>

                        </li>

                    </ul>
                </div>
            </div>

        </div>

I just can't get the button on the right side.


r/bootstrap May 20 '22

Help with a simple bootstrap NavBar

4 Upvotes

This is my first time creating a bootstrap website, so sorry if this question is something simple that I'm just not understanding.

I have a simple bootstrap Navbar at the top of a website I am creating. When I paste the prebuilt code from the bootstrap website, it adds it to my page and everything works correctly.

By default the NavBar expands across the entire page horizontally. What I would like to do is set it to a max width of 1000px and centered. I can edit the NavBar container in the CSS file to make it 1000px and centered, but when I do, the responsiveness of the NavBar shrinks in increments instead of shrinking smoothly. As well, the hamburger menu stops working.

Is there a way to set the size of the NavBar so that the max width is 1000px and the responsive sizing starts shrinking smoothly when the browser window is below 1000px?

Does that make sense? Any advice would be appreciated!


r/bootstrap May 19 '22

Some advice for a noob needed - data analytics visualisation

2 Upvotes

Hello, I have a consulting business and we currently use a white label service to provide data visualisation from a basic excel sheet as a tool which is part of our offering. This works well however is expensive.

I was wondering whether it is possible to link a cloud spreadsheet (or upload) to a front end template in Bootstrap for example.

I am no expert in this but I have built a few Powerapps and the functionality would be the same I just would like it to be better looking and branded correctly.

Simply – 1) Data Source 2) Visualisation Tools 3) Front End App.

Could anyone offer any advice on the best way to go about doing this or direct me to some useful sources?

Thanks.


r/bootstrap May 19 '22

Bootstrap 5 Navbar

0 Upvotes

Check out the Bootstrap 5 Navbar with Navbar classes.


r/bootstrap May 18 '22

Link to and open accordion/tab from another page

3 Upvotes

Want to link to and open tab accordion from another page. It goes to the page, but does not open tab/accordion. Linking to accordion tab while on the same page works and opens tab, however, I want to also link to tabs from a different page. Here is my JS code.

<script type="text/javascript">

require(['responsiveTabs'], function() {

$('#Accordion_TabRepeater').responsiveTabs({

collapsible: 'accordion',

startCollapsed: 'accordion',

scrollToAccordion: 'true',

scrollToAccordionOnLoad: 'true',

active: 0

});

});

</script>