What are
/r/bootstrap's
favorite Products & Services?
From 3.5 billion Reddit comments
The most popular Products mentioned in /r/bootstrap:
The most popular Services mentioned in /r/bootstrap:
Bootstrap
CodePen
jsFiddle
Atom
CodeSandbox
SitePoint
Plunker
Foundation
Materialize
Visual Studio Code
Django
WordPress
freeCodeCamp
Can I use
Tailwind CSS
The most popular reviews in /r/bootstrap:
ms = margin start me = margin end
This is because it uses flex, so you can have either rows or columns and use ms and me. ml and mr are not accurate if you use columns.
"RTL Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right." https://getbootstrap.com/docs/5.0/migration/
No worries! We all had to start with the basics at some point. A site directory is basically where you're storing all your files for the website. Though if this is your first time, would you mind if I ask if you're using shared hosting (you manage everything yourself) or something like Wordpress.com (everything managed for you)? Depending on the answer, I'll be better able to help you :)
You need to think about this a little differently. One better way to look at this is 2 columns, one left and one right. The one on the right then needs to be itself divided into a row that wraps two full width columns.
​
This should get you started. You may need to adjust the column widths and use Bootstrap's row justification classes to get it exactly right for your use case.
​
<div class="container"> <div class="row"> <div class="col-6" id="left-column"> <!-- content --> </div> <div class="col-6" id="right-column"> <div class="row"> <div class="col-12"> <!-- green box --> </div> <div class="col-12"> <!-- blue box -- > </div> </div> </div> </div> </div>
​
Yes! jQuery is written in the JavaScript language - it's not a separate language. So in your .js file you can use jQuery stuff and vanilla JavaScript.
Bootstrap4 is the undisputed leader among the available front-end frameworks today. Given its huge popularity, which is still growing every day, you can be sure that this wonderful toolkit won’t fail you, or leave you alone on your way to building successful websites.
What do you mean? I threw this in a BS5 codesandbox.io and it looks exactly as expected.
Could you please provide a screenshot and a more detailed explanation of how the result of this code differs from what you expect?
Hmm. Looks like the bootstrap defaults for form and input are over-riding the styles for the steam button.
A quick way of fixing would to be to add the class .nav-img to the form as well. Doing this vertically aligns it again.
.nav-img { min-height: 50px; display: flex; align-items: center; }
Add nav-img class to the right hand elements and min-height: 50px; because thats the min height of the actual navbar. Full example below.
Could possibly be that bootstrap is linking correctly?
Check out this codepen, I just added an image so I could see it but the rest is your code.: https://codepen.io/Pcooney13/pen/OEyBQV
The images are lining up vertically, but if you take out the comment lines so bootstrap.css is linked the images should line up correctly. Oterwuse I misunderstood the question
<body class="d-flex flex-column" style="height: 100vh">
<header class="flex-shrink-0">header content</header>
<main class="flex-grow-1"> main content </main>
<footer class="flex-shrink-0">sticky footer content</footer>
</body>
https://codepen.io/anon/pen/NMYWxa
This is the gist of it, make the body a flexible column with 100% view height. Disable shrink flex-shrink-0 on any direct children that should not shrink (e.g. the header, navigation, footer.. ) and allow the main content to grow flex-grow-1.
Maybe you could make two menus, one for each screensize and use d-md-none (and other breakpoints) to show or hide the stuff depending on screen size.
Also maybe look at the offcanvas example on Bootstrap's site: https://getbootstrap.com/docs/4.0/examples/offcanvas/
Consider checking out the card group docs at https://getbootstrap.com/docs/4.6/components/card/#card-groups. I designed that component so that the header and footer would always align. Might be something useful there maybe?
To give you an idea of how you can provide code for people to look at. This is a codepen of the bootstrap nav that I used to help someone else.
Also make sure you've read through the various options in Bootstrap's Nav Documentation. They have a light and dark option default out of the box which should get you about 90% of the way to what you need depending on what you need.
I also suggest learning how to use the Dev Tools in the various browsers. As others itt have suggested.
As someone also pointed out itt you may need to add !important to your CSS styles for them to override some of the base CSS of BS. However, if you have your document setup properly with you custom CSS file referenced after the Bootstrap CSS reference you should be able to override most basic things without the need to us that and it's a good habit to learn how CSS Specificity works so you can avoid having to do that when not necessary.
Not that I know of. You can check http://bower.io/search for a package-manager style list.
Let me touch on something else, though. Any developer worth their salt will have tools and components that they likely already know and use. If you're non-tech, leave some choices to the developer and don't try to dictate every single choice they make. Developing to someone else's spec often leads to problems when they try to make too many choices.
By all means, if you have preferences such as bootstrap, mention that when you're hiring the person. Creating an app is not as simple as just finding components and having a developer 'piece it together'. Development isn't some magic process, it takes a lot of problem solving, decision making, and good ol' hard work to develop stuff. Good luck!
TL;DR Let the developer choose which components best fit.
Doing a layout in bootstrap? Sure, just about anything is possible if you know what you're doing. As far as animations go, you'll want to add in an animation library. I've used Animate.css mixed in with bootstrap in the past with good results. If you want more control you're going to want to go with a JS animation library of which there are hundreds.
I used mdb free for a few projects and eventually asked myself the same question. Some of the pro features I wanted and/or needed so I looked for alternatives and found http://materializecss.com. it isn't based on bootstrap but is similar enough where a few find/replaces updated everything.
I know this doesn't really answer your question but figured it may help you as well.
> The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Having a look at bootsrapdocumentation, there are examples on how to structure your html https://getbootstrap.com/docs/4.3/components/forms/
We are ok with helping on this community, however I think it'd be very useful for you if you check bootstrap documentation before smashing your head on the wall for out of the box functionalities.
Use flex to set the heights
https://stackoverflow.com/questions/38794176/using-css-flex-to-make-elements-equal-height-in-a-row
Edit: Bootstrap 4 already has your back! You’re looking for card groups (which uses display: flex). Read more here: https://getbootstrap.com/docs/4.0/components/card/
Bootstrap 4 does not support IE8-9, Bootstrap 3 does. I would recommend you check Google Analytics (or whatever tracker you use) to see how much of your traffic is from those browsers. No updates are being made to Bootstrap 3 besides any critical bugs. This is mentioned in their docs here.
There's really no rush to switch to Bootstrap 4, it's still in beta. You could stay on Bootstrap 3 on years and be fine.
Have a look at this one, there are already some nifty classes in bootstrap to help with what you are after
Is this what you are looking for?
Your questions regarding form/form group i suppose depends on the use case and if its applicable to your situation
That should be correct, just make sure you have the correct file structure.
With the proper file structure and code the button groups should appear just like they do here: http://getbootstrap.com/components/#btn-groups
If you still can't get it working post a sample of your code on something like http://jsfiddle.net/ and I can take a look.
Hey there, forget everything I suggested, I finally got around to testing.
Add the below to your style sheet. This is the flex-basis fix I was trying to remember last night.
.card > * { flex: 0 0 auto }
This will target all direct children of your card and set their:
flex-grow to 0
flex-shrink to 0
flex-basis to auto
Hey, I’m pretty new to this stuff too so might not necessarily be able to help you but just trying to further figure out what you’re trying to do.
So you want rows and in each row you want two columns: in column 1 there’ll be a Heading, a subheading underneath and a description below that. In column 2 (to the right of column 1) there’ll be a picture?
Edit: not quite right but sorta like this?
Well, there's this tutorial on how to make a Tumblr theme. You should be able to convert the HTML code of your template to a Tumblr theme that way.
That, or you could ask the author if he can do it for you, assuming you have a support license or something.
I replied to your post in /r/webdev, but I'll post it here to for others in case they run into the same issue:
> I'm not exactly sure what you're trying to do, but it sounds and looks like you're having issues making all cards the same height. > > Bootstrap's card decks/groups are a little... buggy (at least to me). You're probably better off just using flex box to achieve the effect you're looking for. > > Here's a potential fix; I trimmed most of the irrelevant stuff out of it so it's easier for you to read. Depending on how many cards you end up with, you'll probably want to adjust the breakpoints. I don't have access to the images, but it should still work when you add them.
You're not closing the header element.
Make sure you close divs properly.
Make sure your media queries (the lg, md, sm, xs sizes) all match up. That is, all your col-lg's add up to 12, all your col-sm's add up to 12 etc.
I made a codepen that fixes most of your issues. https://codepen.io/anon/pen/MOmgoP?editors=1000
(Pasting html / css here doesn't help, because it's not properly formatted.)
Ah I see sorry I was being lazy, yeah because you have three columns per row, the rows are not going to change because they are three per row. I think the answer must include float lefting the boxes and not having them in rows.. but I'm not sure. Will have a look around.
Ok solved it, you just need to loose the rows :D
For what I can see, eonasdan datepicker only use the classes of bootstrap 3 for the gliphycons and the input group addons... the other classes are in bootstrap 5 also.
Why don't you try to change that classes in the datepicker whit bootstrap 5 classes and replicate it?
See the bootstrap 5 multiple-addons and instead of using glyphicon use some svg. I use the svg of heroicons.
Perhaps this could work...
How I usually do it
# _variables.scss
extend colors here
style.scss
@import "variables" # my variables
@import "~bootstrap" # import bootstrap everything
then in the JS code, import style.scss . It works this way.
In their documentation it states that some areas don't use that map yet.
https://getbootstrap.com/docs/5.1/customize/color/#color-sass-maps
Have a look at the docs:
>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
Source: https://getbootstrap.com/docs/4.5/layout/grid/
You have just 2+8=10 columns so you are 2 columns short.
Try using this instead of an image.
http://www.colorzilla.com/gradient-editor/
Should be as simple as defining it after the bootstrap css is loaded.
.jumbotron { background: rgb(109,179,242); background: -moz-linear-gradient(-45deg, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(50%,rgba(84,163,238,1)), color-stop(51%,rgba(54,144,240,1)), color-stop(100%,rgba(30,105,222,1))); background: -webkit-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: -o-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: -ms-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: linear-gradient(135deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 );
}
No worries. Glad it resolved the issue for you.
I should correct the above code noting that the 'type' attribute on MIME types is redundant in HTML5, so that should just be:
<script src="js/bootstrap.js"></script>
It's worth brushing up on the HTML5 spec if you're not familiar with it. It may seem a boring read now, but it will save to time and issues in the future. Plus you'll run into these things anyway if you need to validate your code.
http://www.w3.org/TR/html5-diff/
Also, it's best to place your JS before the closing body tag, not after the opening one, as shown in the example Bootstrap templates linked above.
You can try Mobirise for simpler websites that provides Bootstrap-based templates: https://mobirise.com/
For more complicated project, I would also recommend WrapBootstrap Kits.
I don't get what there is to learn about bootstrap, it's simply a css framework and if you go to their site like others you can click on components and see how to use them (aka what class/id to type in and bam there it is!)
Sass takes getting used to but that has nice documentation as well. Just like css but with one more step to run in terminal (or you could just enable watch and it'll do it for you!)
My suggestion is build your 12 page site with bootstrap, then do it again but with another framework such as Materialize or Pure and then you'll get an understanding what frameworks are meant for. I jump around between frameworks because I do have a tendency of making my sites look really similar especially if I don't use a framework.
look into flexbox, which can force each column to be the same height if thats what youre going for.
here is a good resource: https://codepen.io/enxaneta/full/adLPwv
also remember you can use media queries to border:none the columns if needed.
Yes, you can. Take a look at the display utilities: https://getbootstrap.com/docs/4.3/utilities/display/
If you could give a visual example of what you are trying to achieve I might be able to get you on track even better.
Ya take a look at this depending on which version of bootstrap you are using.
https://getbootstrap.com/docs/4.0/components/navbar/ <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav>
I think I know what you are looking for.
​
So go to:
https://getbootstrap.com/docs/4.3/examples/
​
Then "Download source code", once you unzip it go to site / docs / 4.3 / examples
That's the location of all those examples shown on the page.
​
Hope it helps
One of your problems appears to be that Bootstrap is a 12-column grid system, and you are attempting to use 24 columns:
class="col-sm-24"
See: https://getbootstrap.com/docs/4.3/layout/grid/#grid-options
I believe you might be able to nest rows inside columns to achieve a greater column density, though...
Bootstrap has helper classes for this very use case. Simple add “text-centered” to the column classes.
Learn more about text css within bootstrap here: https://getbootstrap.com/docs/4.0/utilities/text/
To make the text responsive, use media queries and define a font-size for each break-point:
https://getbootstrap.com/docs/3.3/css/#grid-media-queries
Also, just a side-note, I think "Happiness" is spelled incorrectly.
should contain everything you need the first lines of all minified CDN'd files all contain this :
/*! * Bootstrap v4.1.0 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
not sure if this is good for you from a legal standpoint
For the v4 Beta 2 at least, I am pretty sure you need to use one of the expand classes on your navbar https://getbootstrap.com/docs/4.0/components/navbar/#how-it-works
Could be diferent if you're on alpha... but something to look into!
I'm not sure what you are asking, but it sounds like you are opening bootstrap.min.css which is not friendly to read nor edit. But generally, you do not want to edit the bootstrap files anyhow. If you want to make modifications you can either override some of the bootstrap css with your own stylesheet. Another option is to customize bootstrap and then download it.
If you want to play around a bit, you would be writing the html and incorporating the bootstrap into it. There are some good tutorials out there, including w3schools.
I use HTML CSS Support which isn't specifically built for Bootstrap, but it provides class intellisense which is extremely handy when working with the plethora of classes that Bootstrap includes :)
I'd recommend this extension even if you're not using Bootstrap; it's a great QoL extension.
What you are trying to do is not very obvious. If you want to navigate through tabs, why don't you use the code from the Bootstrap doc? They even provide Javascript to switch tabs
Nav Menu Toggle Not Working?
This may or not be related, but there was a breaking change between Bootstrap 4 and 5. Booststrap 5 no longer requires JQuery, so data attributes for javascript plugins are not namespaced with -bs.
Ref: https://getbootstrap.com/docs/5.0/migration/#javascript
That only works if the font is installed on the target device (e.g. natively included in Android or iOS). Tahome is Windows only.
You need to buy a license and include it as a webfont in your CSS if you insist on using Tahoma.
Alternatively try Open Sans as a Tahoma replacement. You can provide it yourself or use it as a "Google Font": https://fonts.google.com/specimen/Open+Sans?query=open+sans
> wide support of CSS grid
http://caniuse.com/#search=grid
Excluding 29% of global traffic from a good user experience is not good enough. Fun to learn now so you have mastered it when the coverage increases.
As to Bootstrap, down load the source and understand how it all fits together. You will learn some great stuff.
Hey! You can try something simple like this, you don't need something very complicated
Method: Gradient with css
CODE:
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Static Template</title><link rel="stylesheet" href="style.css"></head><div class="container my-4"><p class="font-weight-bold">Using gradient to have two colors in one navigation bar</p><p><strong>You can try this way<hr class="my-4"><P>1- Create a nav, 2- apply a gradient with css.</P>
<!--Navbar--><nav class="navbar navbar-expand-lg navbar-dark example"><a class="navbar-brand" href="#">Navbar example</a>
</nav><!--/.Navbar--></html>
CSS
.example {background: linear-gradient(to right,#000 0%,#000 50%,#cd0000 50%,#cd0000 100%);}
I'll drop the link off my sandbox here for detail CodeSandBox
I hope this helps you!
Update###
I almost got this working (thanks to a template at codeply:)
https://codepen.io/Unconformed/pen/BVrrNP
My H1 is dropping down under sidebar for mobile, not sure why yet. I think I will like flexbox!
Hey, I forked your CodePen example: https://codepen.io/mpeabody/pen/RyERjx
Just had to add Bootstrap 4 to the CSS (click the gear icon next to 'CSS'). Looks fine now.
Maybe just try putting it into a div and setting that div to "display: block".
Just quickly signed into codepen.. If I copy my code there, it doesnt show the columns beside each other, but from top to bottom (one above the other) Can you view this?:
https://codepen.io/Conny123/pen/bMOepj
I normally use notepad++ and there I get the problem with the vertical alignment.
This is how it looks and my code: https://imgur.com/a/EqWlY3i
Hello, i would really appreciate the help, man. Heres the codepen link. Notice what happens when you click the button.
https://codepen.io/wetpenguin/pen/odYYbJ
What im trying to achieve is that it would open only in the row on the right and would take 100% width of that and not whole screen.
The issue here, is that the required form elements are hidden when you move to a different tab.
The browser cannot draw focus to these hidden elements and display a warning message if they are invalid, hence they get ignored and the browser logs an error "invalid x is not focusable".
This may work, though I haven't done any extensive testing:-
Read up on flex functionality, it should easily fix your problem. Your best friend is Google dev tools (or FF) to test style changes in real time before changing your actual code. https://getbootstrap.com/docs/4.2/utilities/flex/
I vaguely remember a web site/page that has a custom form to let you select the specific components you wanted. I think this was only for Bootstrap 3.x though. I've never seen this for BS 4 or 5.
You can still extract the specific components you want to use with Bootstrap 5, but you'll need to do this via a manual compiling process. More info here: https://getbootstrap.com/docs/5.1/getting-started/download/
First, im not sure you know what you are looking for. - What you want to do requires both client side and server side code. Bootstrap is a library to develop the client side. - Boostrap is not a ready tool, it helps you develop the interface yourself… but u still have to develop it
Second, the component for Fileupload is not very sexy in Boostrap
https://getbootstrap.com/docs/4.0/components/forms/
And people tend to use the component Dropzone instead
But there are many other solutions.
There is a size component for margin and padding classes. The document is a little confusing.
“The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.”
So you can set your padding on an element by adding classes like:
p-sm-0 (no padding on small) p-md-1 (bigger padding on medium) p-lg-2 (even bigger large)
You would need to do this for every element individually though. This doesn’t globally change all elements. Making the global change is a different thing.
The only way to use background images using Bootstrap without additional CSS is in cards. See here:
https://getbootstrap.com/docs/5.1/components/card/#image-overlays
You can of course use additional CSS on any block-level element and set the background size to cover.
I've tried setting it up on codesandbox, but I can't seem to figure out how to duplicate the environment (it can't seem to locate my styles sheet there). Here's a link if you want to have a look, but I've only spent a couple of minutes on duplicating the environment here. https://codesandbox.io/s/mystifying-morning-wqi6o?fontsize=14&hidenavigation=1&theme=dark
And yes! That's the space that I'm seeing! It looks good in a narrow viewport, but it's all wonky in a wider viewport.
And the idea below from TheRaincaller partially works, though with problems as described below.
Pen can be found here. I've included test cases with square, portrait, and landscape source images.
This is possible if you embrace Bootstrap 4 and trade Internet Explorer support for nifty CSS features.
I tackled this using two useful techniques. The first one is establishing a square container when the dimensions are unknown. The .img-round wrapper does this with zero height and 100% padding-bottom. Cutting the corners is done with border-radius and overflow rules. Position is set to relative.
The image itself is positioned absolutely with 100% width and height. This would normally squash the image if it's not a perfect square to begin with. Using the object-fit rule the image can be set to cover the area while retaining aspect ratio.
Shame on me for thinking a lot less took place in the latest 4.0 update. This is working more like I originally intended though still needs some design love https://codepen.io/Pcooney13/pen/wrVVVX?editors=1100.
h/t u/AyValo
Not sure about Bootstrap 4, but my go-to is this nifty, lightweight solution. Once you've got to grips with it it's easy to add other kinds of animation as well.
Splitting code for organization and reusability. I am wanting to pull the modals in via ajax, but not sure how well this will work as each modal has a nested carousel within that uses jquery to activate the info slides within them. https://codepen.io/kyledrew/pen/RLMLQP
I essentially want to pull out the modal content and leave the activators. Codepen for reference.
If you're using off-canvas as the horizontal collapse block then:
.offcanvas-start places offcanvas on the left of the viewport
.offcanvas-end places offcanvas on the right of the viewport
more info here:
https://getbootstrap.com/docs/5.0/components/offcanvas/
Otherwise check out the classes they are using and swap start or s with end or e (or vice versa).
Well you might be in luck.
BS have released an experimental CSS grid system that may help? I haven't checked it out thoroughly so I don't know how useful it will be but have a look at it.
Bootstrap's documentation indicates one might need to play with the padding for just this situation:
https://getbootstrap.com/docs/4.0/components/navbar/#placement
>Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.
I don't know enough about Bootstrap to know where to make the modifications though.
Did u link the bootstrap.js?
<script src=„https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js“ integrity=„sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM“ crossorigin=„anonymous“></script>
> Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.
https://getbootstrap.com/docs/5.0/getting-started/introduction/#js
I don't have this problem in Firefox.
It could be either an error in the code of the page or an extension that blocks bootstrap's behaviour.
Do the checkboxes in the documentation work for you? https://getbootstrap.com/docs/5.1/forms/checks-radios/
Is it on a specific project you are working on? Can you send a link to the project?
I believe because date-pickers are all very different, and use a variety of different elements like tables, it would still require JS or JQuery to manipulate the picker. Under the Bootstap 5.1 documentation, they discuss the Bootstrap "Table" elements are opt-in ... Meaning not out-of-the-box. ref > https://getbootstrap.com/docs/5.1/content/tables/#overview
Sounds like an offcanvas is what you're looking for. Maybe a bit of a hacky solution to create an offcanvas per card but if it works it works.
You want it to be a block button, which is quite different in Bootstrap 5, you need to wrap it in a container with a few css classes https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons
Bootstrap is not a programming language. To put it in very basic terms, it is a combination of a CSS file and a JS file that includes lots of tools and components that developers use in order to build mobile-first websites.
Think of it as a framework, or a set of tools that you can use to "bootstrap" the development of a new project.
It includes important features like a grid system that adapts based on the users screen size, commonly used components like buttons, forms, navigation options, etc., and helpful utilities to help developers move through projects faster without the need to write large amounts of custom CSS.
I would check out https://getbootstrap.com/ which is their official website to learn more and to see how their framework works.
Glad you fixed it!
Bootstrap 3, 4 and 5 are quite different but they all have their own good, full documentation. Make sure you see "5.0" in the URL when you're looking at Bootstrap documentation: https://getbootstrap.com/docs/5.0/components/navbar/
I notice when I search Google for "bootstrap navbar" the first hit is for the 4.0 documentation.
There's also a dropdown at the top right of the Bootstrap documentation page with the version number so if you land in the wrong spot from searching, you can still easily get to the 5 docs.
Check out this link: https://getbootstrap.com/docs/5.0/getting-started/introduction/
After that first step you can look at https://getbootstrap.com/docs/5.0/components/modal/
Note that this will be version 5, and not version 3 that you have looked at.
I meant to put this link with the first paragraph: https://getbootstrap.com/docs/4.0/utilities/display/
Also, the Bootstrap's documentation site manages to do exactly what you describe with its menu.
This issue is because Grid has 12 column. When you are in small screen your grid layout is col-sm-3 and thus to center it, you need 4 blocks but you have just 3 blocks.To center 3 blocks you can use col-sm-4
For more Reference:
First off you've got duplicate references to bootstrap css and js in there, as well as popper and jquery. And you've got stuff in the wrong place, in the wrong order.
Look at the Starter Template here: https://getbootstrap.com/docs/4.6/getting-started/introduction/
Put your Bootstrap CSS CDN link in the <head> section. Then AFTER that, put your Google Fonts css, then bootstrap.css, then styles.css.
Actually you shouldn't have any local bootstrap.css in there...if you want to make changes to the Bootstrap CSS, make them in styles.css. Or if your local bootstrap.css is a full copy of Bootstrap, then don't include the CDN link.
Then, before the </body> tag, after all your page code, put your jquery CDN link, then your Popper js CDN link, then your Boostrap js CDN link. After that put your custom js/bootstrap.js but once again if you're using the CDN don't use a full copy of the bootstrap.js.
See if cleaning up your references and putting them in the right place helps.
That's exactly what the SCSS is for so you can extend the framework using the inbuilt variables and themes. It's relatively easy once you get your head around it.
The last 3.x version was 3.4.1: https://getbootstrap.com/docs/3.4/getting-started/#download
Obviously you're missing out on all the improvements in version 4 and the soon to be released version 5 (no need for jQuery!)
I've been using bootstrap for about a year now and I am a huge fan. My team is considering using Bootstrap 5 in our next project, and I came across this change. Our other projects use the spacing utilities a lot, so this is going to be a big change for us, so I wondered why this change was made. After reading the documentation thoroughly, I revealed the true intentions behind the change. Hater's are going to say it's because of languages/countries that read text in different directions than US left -> right, but after making this discovery, the truth became clear.
On the bootstrap website you need to look at the grids section, this will show you how to change the amount of elements on a row. Would looks something like col-lg-12
Tooltips and popovers have a whitelist/allowlist (v4/v5) option that sanitizes the HTML you pass it for security reasons. You can modify it as needed.
v4: https://getbootstrap.com/docs/4.5/components/tooltips/#options
v5: https://getbootstrap.com/docs/5.0/components/tooltips/#options
>I checked out the documentation and it just contains code snippets for different things ranging from layouts to colors. Is that all a framework consist of is predefined classes, ids, colors, etc?
You can also use it to create a custom design system using Sass. See Bootstrap theming.
Upgrade if you want and if the rest of your code-base can handle it. Bootstrap 5 is just around the corner so perhaps wait until its released so that you are up to date with the latest major release.
You have put the entire panel-body div wrapped inside the panel-heading. That seems a bit odd. Look in the documentation.
https://getbootstrap.com/docs/3.3/components/#panels
Try inspect the h3 element using the dev-tools in Chrome/Firefox and check what is causing it to break to a new row. The h3 is probably a block element taking up the rest of the row pushing the panel-body to be located on a new row. If so, change h3 to be of inline type.
Bootstrap uses a "native font stack". See the details here:
https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack
Bootstrap doesn't include fonts. So depending on the device you are using you might see Helvetica Neue, Arial, Segoe UI or Roboto.
To have a consistent font experience on all devices you will have to deliver your preferred font and override Bootstrap's defaults (pay attention to any needed license when delivering your font).
I just began teaching myself Bootstrap 4 last week so bear with me. Check out the following link and navigate down to color schemes: https://getbootstrap.com/docs/4.0/components/navbar/
There are a couple basic class options given for three separate colors you'll see. If you want to change the color of the navbar to something else you can do an in-line style tag such as the following:
style="background-color: white; color: black;"
It's not considered good practice from what I've seen but it works. Best practice would be to link your HTML to your CSS which would look like the following in CSS:
.nav-bar {
color: #white;
}
If I misinterpreted your question and you already understand the above try clearing your your cache as sometimes your browser stores CSS and reloads that even when you have edited your CSS. I think of it as Ghost CSS. In Chrome you can do that by hitting F12, press Network in the top bar, and subsequently press Disable Cache. Make sure to undo it when your done as some sites will block you until you've reactivated it.
Feel free to hit me up if you'd like. I've been stuck in quarantine, so my studying has gone through the roof these past weeks.
http://fontello.com/ is also a tool that kinda aggregates icons from a number of sources. Plenty of variety. Check out this link that explains Bootstrap grid system easily https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
Are you asking why the number twelve was chosen? If so, the creator of Bootstrap has answered a related question on Quora.
Edit: He has also answered many other questions about Bootstrap which you may find enlightening.
Not sure if this makes any sense at all since I'm still pretty new to web dev, but I had the exact same issue last week. Adding jquery from my project folder didn't work, but when I used a google link, everything worked fine.
https://developers.google.com/speed/libraries/devguide#jquery
Try that maybe?
No. The class 'h-100' is/should already be there as part of the template/BS. It's in the snippet of code in the original post too. All you should have to do is add that snippet of CSS to your stylesheet.
><div class="row"> <div class="col-lg-3 col-md-6 mb-4 column workfiles"> <div class="card h-100"> <a href="#"> <img class="card-img-top" src="http://placehold.it/700x400g" alt=""> </a> <div class="card-body"> <h4 class="card-title"> <a href="#" target="_blank">Accept Opportunity</a> </h4> <h5>Elearning</h5> <p class="card-text">This demonstration describes the steps for accepting an opportunity.</p> </div> <div class="card-footer"> Duration: 5 mins </div> </div> </div>
Foundation Sites is a competitor to Bootstrap that I've been using for years. It's incredibly full-featured like Bootstrap, but very modular. If you use their SASS toolchain (instead of downloading precompiled CSS), you can pick and choose exactly what features you want, so you can avoid massive overhead quite easily and keep the built CSS file sizes pretty low
I know this post is old, but here's some info that is helpful for starting.
http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/ - starting a site from scratch
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/ - explains all the options so you can see the code and put in what you want
not actually /r/bootstrap related, i whould suggest you /r/webdev or /r/javascript.
To asnwer your question: there are thousands of js charting libraries, i whould suggest you http://www.chartjs.org/ because its simple, lightweight and does the job with minimal effort.
The biggesst player is http://d3js.org/. I personally dont like it, because you will end up writing a lot more verbose code and its generic approach migth give you enless possibilities that will require a lot of (unnecesary) research in the beginning to get a quick line chart.
also google for "javascript charts/ graphs library"
HTML
<html> <head> <link data-require="bootstrap@" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12 bg-image"></div> </div> </div> </body> </html>
CSS
.bg-image { background-image: url("http://barefootblonde.com/wp-content/uploads/Annecy-France.jpg"); min-height: 500px; }
An quick generated example of what I was talking about with tables. http://plnkr.co/edit/PHf83qgVpNskvhLGc7ap
It is aligned both horizontally and vertically. When I try to do this with 3 separate columns with col-md-4 the "rows" since there is no notion of rows in the context.
When I try to do a container with rows I get the alignment I want but I find myself dealing with too much whitespace.
This is an example of what I was doing with the rows http://plnkr.co/edit/ATKBNRSirZGQggi5sYrF
I have added some styles that get me closer to what I want locally but I am not sure if bootstrap already provides a better solution.
Thanks for the video, I haven't watched it yet but I'll check it out when I get a chance.
Check out Responsive Design Mode on the FireFox developer edition:
FireFox Developer Edition: