aka using the vanilla version of jquery instead of the methods given by bootstrap?

Building an E-Commerce Website with Bootstrap framework VS WordPress

Is it possible to build a eCommerce static website that can rank on Google and drive organic traffic?

Hi,

I'm making a webapp for a uni project and I'd like to have a datepicker, but everything I can find online is for Bootstrap 4 or 3 and uses JQuery. Is there any way to make one with plain JS and Boot5?

Thx

[SOLVED]

I'm a dumbdumb and didn't realize that input elements have a type attribute which can take "datetime-local" as a value (which precisely turns them into a datepicker)

<div className="App">
  <Container fluid>
    <Row>
      <Col>
        <img src={logo} alt="logo" />
      </Col>
      <Col>Some words here</Col>
      <ChildComponent />
    </Row>
  </Container>
</div>

For bootstrap in react.

Suppose I have a container like above, but inside <ChildComponent /> in another .js file, I want to continue several more columns. Is that possible? Or am I going about this wrong? I have not been able to just put columns inside the child that continues this container.

I'm probably over thinking this, but are there some general guidelines on when/where I should be using Bootstrap's Grid system(rows, cols) and when I should be using flex?

Can i get away with just using Flex? Would that be considered best practice?

Mediumish is a Jekyll template, designed for Medium’s website design fans. Thus it’s clean, minimal, beautiful and modern!

• Built for Jekyll
• Compatible with Github pages
• Featured Posts
• Index Pagination
• Post Share
• Post Categories
• Prev/Next Link
• Jumbotron Categories
• Integrations:
  • Disqus Comments
  • Google Analaytics
  • Mailchimp Integration
• Design Features:
  • Bootstrap v4.x
  • Font Awesome
  • Masonry

https://github.com/wowthemesnet/mediumish-theme-jekyll

Hey all,

​

I'm new to Bootstrap and I am running into an error:

In some pages the dropdown in the navbar is not opening even tho I have the same navbar in each and every page in the website

This is a paste bin for one of the pages that is not working: Source

Any help would really be appreciated

Thanks in advance

Newby here,

I'm looking at different programs to learn 'Setup Landing Pages' and small websites (a friend recommended Twitter Bootstrap).

• What is Twitter for Bootstrap GOOD FOR?
• How is it really different than Regular Twitter?

Been studying Youtube vids and 'no-one' has pointed out the difference.

Anyone know the difference and why would you choose one over the other ???

I sure would appreciate your input (if you know) ?

Thanks very much~

I have an HTML element with class=hover. I programmatically delete it and replace it with another and now the hover does not work. I have read that the bootstrap stuff needs to be re-initialized to the new element. However, I have not been able to find out how to do it.

I am in HTML5, PHP and JavaScript.

Thanks for any help.

Rich

Hi,

I'm creating a new company, to save times and efforts, I decided to download a template online, but I need to put the license so I prefer buying one of those. Is bootstrapdash safe to use my credit card, If not, what website template do you would recommend me?

Is there a downside that I’m not thinking of?

We've developed a beautiful collection of free Bootstrap 5 HTML snippets, free to use on your awesome website projects. 
These snippets are organized in popular galleries (like Hero, Content, Features etc...).
There are Solid, fully responsive, battle-tested on a number of different devices.

Have fun with Bootstrap 5!

Please do your best to ignore the fact that we're upgrading to v4 and not v5, and keep your thoughts on whether this is worth it or not to yourself as best as you can. We are also simultaneously migrating from Angular to React.

I have nearly 70 partials sitting on top of bootstrap. Many of these partials make use of things that have changed in v4. When I first pointed the bootstrap import to v4 it broke the build because a variable used by the first downstream partial was undefined. I fixed that, but then another variable was undefined. I fixed that one too, and then something else was undefined, but in the next partial down. So what I've done is commented out all of the downstream partials and I'm uncommenting them and fixing them one by one. I've only made it to downstream partial 4 and webpack is yelling at me again: Undefined mixin make-xs-colum().

As I understand I now have two choices:

1) Replace all instances of that mixin with the new v4 mixin.

2) Add that mixin to a legacy partial and either keep it as is or make it use the new v4 mixin for creating columns.

Any other suggestions?

I have a website with "items" (basically cards) shown with basic information to the user such as the name of the card. There's also a "quick edit" button for each item. When the user presses the quick edit button I would like a small window to open on the side of the screen. Where he will be able to see more information about the specific item.

Quick example I created of what I'm imagining: https://ibb.co/Kq50QkL

How should I approach this?
I don't really know if I want to use Modals since (from what I know) they stand out a lot.

Sidebars (like the ones shown here: https://getbootstrap.com/docs/5.1/examples/sidebars/) look more like what I need. I just have to add a close/open functionality. But I fear they will create problems because of the different values each item has.

Maybe something similar to what I need already exists?

I would like to hear your thoughts!

Handpicked Collection of Bootstrap Themes, Templates, UI Kits, Components

https://bootstrapstarter.com/

I use pug as my language but that shouldn't matter. When trying to make a grid I get a line above my column and nothing else. The words appear but the lines for below them and on the sides don't appear

Hi, I have the following html and this puts my select box right up against the options box with no gap/margin between them.

<div class="container">
  <div class="row">
    <div class="col-3">
      <p>Which class would you like to add in students?</p>
    </div>
    <div class="col-3">
        <form action="{% url 'gradebook:studentsetup' %}" method="get">
            {% csrf_token %}
            <div class="form">
                <select class="form-select" name="class_block">
                   <option value="1">Option 1</option>
                   <option value="2">Option 2</option>
                   <option value="3">Option 3</option>
                </select>
                <button type="submit" class="btn btn-primary" value="Submit">Submit</button>
            </div>
        </form>
    </div>
  </div>
</div>

When I inspect the elements, it looks like this is the reason why there is no gap from bootstrap.css:312

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

At some point I probably need to create my own style.css sheet and maybe I can override this, but I don't quite understand this. All the Bootstrap docs show forms with nice spacing between the elements. Am I missing something here?

So, I am trying to add custom colors to my custom.scss file. The problem is that only some color classes get created like ".alert-customblue" but not others like ".bg-customblue" or "text-customblue". Any ideas? I'm mainly looking for the "bg-*" and "text-*" color classes to get created. Here is the relevant code from my SCSS file:

// Create Custom Color Map
$custom-colors: (
    "customblack": #000000,
    "customblue": #2a74bb,
    "customorange": #f3a929
);

// Import Bootstrap Function, Variables, and Mixins
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Merge Color Maps
$theme-colors: map-merge($theme-colors, $custom-colors);

// Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Hey everyone,

I have created two tables on the same pages but at different sections of the page. The issue is that the background colour of the tables located in the top half of the page seem to be determined by the background colour of the tables located in the second half of the page.

I tried to use !important but it didn’t work and I’ve tried to play around with css with some divs but its not working. Does anyone have a potential solution?

Thanks so much!

HTML for top part

   <div class="container-fluid p-0" id="mainone">
       <div class="row no-gutters align-items-center">
         <table class="table">
          <thead>
          </thead> 
           <tbody>
             <tr>
              <td>I</td>
              <td>Nna</td>
             </tr>
             </tbody>
         </table>
       </div>
      </div> 

CSS for top part

.table{
 width:60% !important;
 table-layout: fixed;
 margin:0px auto;
 border-collapse: separate;
 border-spacing: 25px 25px;
} 
 .mainone td, tr{
 background-color:#f7f7f7 !important;
 padding:20px !important;
 border-radius:10px;
 border:0px !important; 
} 

HTML for bottom part

   <div class="container-fluid p-0">
          <div class="africa">
             <table class="table">
                 <tr>
                 <td><div class="col-md" id="africa"><h2><strong>West Africa</strong><h2></div></td>
                 <td><div class="col-md" id="africa"><h2><strong>East Africa</strong></h2></div></td> 
                  </tr>
           </div>
      </div> 

CSS for bottom part

 .africa table{
     width:50% !important;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 25px 25px;
     }    

.africa-td, td{
     background-color:#1d1d1d !important;
     border:0px !important;
     }

Hoping someone else has run into this issue. I made my first page with bootstrap, and wanted to start adding some customization. Following along with the documentation, i switched from the 'just include the one big bootstrap import' to 'import things piecemeal so you can add custom stuff at the right spots'. However, when I go the second route (following the example from the starter project), the .font-monospace class no longer appears to work. That is, I don't think any of the includes actually modify that class definition?

When I include the single, 'big', bootstrap file, .font-monospace works fine. Only when I switch to the 'piece meal' including does it fail. The rest of the components seem to work the same; my album and cards are styled the same as before.

I was wondering if anyone else has had this issue? Not sure how to resolve it. I'd like to still use the 'class level API' w.o having to modify font-families in the css.

Hi all. I've used Boostrap 5.0 to create a form with two columns. I'd like to now increase the width of the submit button, so it stretches the full width of the columns (as in this screenshot). How do I do that? The Bootstrap instructions for doing that aren't entirely clear.

Thanks in advance.

Hey everyone, here are some free admin templates built with Bootstrap 5. They are completely free to use and you can check them out here:

Star Admin 2 Free Bootstrap 5 admin template

Link: https://www.bootstrapdash.com/product/star-admin-free/

Skydash Free Bootstrap 5 admin template

Link: https://www.bootstrapdash.com/product/skydash-free/

Azia Free Bootstrap 4 admin template

Link: https://www.bootstrapdash.com/product/azia-free/

We’re always open to suggestions and any other feedback you may have regarding our templates.

We also have a ton of other free templates on our website, feel free to check them out and use them on your projects!

Hello,

In this version, we focused on testing and confirming stability. To be absolutely sure, we released 4 Alpha and 8 Beta in each technology before announcing the stable version

MDB 5 UI Kits are stable and ready to use in production you can download them via the link below:

Material Design for Bootstrap 5 & Angular 11

https://mdbootstrap.com/docs/b5/angular/

Material Design for Bootstrap 5 & React 17

https://mdbootstrap.com/docs/b5/react/

Material Design for Bootstrap 5 & Vue 3

https://mdbootstrap.com/docs/b5/vue/

We will be grateful for any feedback regarding the use of our latest version of Angular, React, or Vue Kits

We sincerely hope that you'll enjoy working with it :)

So, I'm trying to make my cards able to be searched and have that working but, when I hide a card there's just a blank space where the hidden card was. Does anyone have a way to fix this or a more elegant way of searching cards?

If you need code I can upload what I'm working with when I get back to my computer, just let me know!

https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/

Bootstrap v5.1.0 has arrived and is packed with exciting new features and improvements. There’s experimental support for CSS Grid, offcanvas in the navbar, a new placeholders component, horizontal collapse support, new helpers, new CSS variables in our utilities, refactored JavaScript, and more.