What is Reddit's opinion of
Bootstrap?
From 3.5 billion Reddit comments
100 reviews of this app found across Reddit:
Not a bad choice depending on your type of implementation. You can opt to only import/include the CSS which you're using, rather than the whole package. https://getbootstrap.com/docs/5.0/customize/optimize/
Pretty good job then! I would check out YouTube for some hands-on experience. But your best bet for a quick UI framework would be to use Bootstrap. You'll be able to throw together a professional looking website much more quickly. Their website also has a lot of reference material on how to use their widgets.
Love the website! Good luck in making improvements.
Check this out: https://www.canbike.org/CSSpixels/
But I dont care about resolution of specific device. Try to create a responsive layout for the whole range of resolutions. Set minimal and maximum width in css pixels that you want to support and make website look good and usable anywhere on that range. Today you can use flexbox and CSS grid to create great fluid layouts. But that does not mean media queries has no justification.
For common breakpoints, check out https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints, these are mobile first (due to min-width) but u can use max-width instead if u want. Also dont be scared to use custom media querie if u need it.
Pros
- Can really cut down on time-to-ship. Not much more to say here. Load Bootstrap from a CDN or as static assets and start coding.
- Thoroughly tested in a lot of different scenarios. No one likes thinking about IE ever.
- Tons of built in features that are very useful in the real world. Form validation, modals, hamburger menus, etc.
- Built-in responsiveness. Mobile friendly out of the box.
Cons
- There is a performance cost as you are going to be loading a lot of unused CSS. Unless you go with a more bare-bones version. It's probably a minor issue for most folks but it is a consideration.
- Often Bootstrap sites feel like Bootstrap sites. You start to recognize the design and functionality patterns pretty quickly all over the web.
- From my own experience, it is way too easy to fall into the "we're out of time, just throw in Bootstrap and let's move on" mode.
TL;DR - Bootstrap is a wonderful tool for your toolbox. Don't overuse it. Definitely learn Flexbox, Grid, and other native CSS properties.
For what it's worth, Derivative Clicker was around before Swarmsim.
> Game often looks like Swarm Simulator
It'd be easy to read this as "everyone's copying Swarmsim", so I want to be clear: this isn't my work. Swarmsim uses Bootstrap with almost no customization. Bootstrap's a popular theme/layout used by many different websites, most of which aren't even related to incremental games, much less Swarmsim.
It needs some work. It's a nice first attempt, but there are some more obvious problems that you need to work out.
Others have mentioned ways to fix your header list issue. They've also mentioned removing padding from the html and body elements so you don't have the white padding around your site.
But something I haven't seen mentioned is your transparent header. I think that's an unfortunate UI design; it looks OK when the header image is showing through, but not when it's covering text. Perhaps use Javascript to set opacity to full once you've scrolled past the header image, or animate the opacity away from full when you scroll all the way to the top. Either way, the transparent header with text behind it makes it hard to read.
You use a lot of border-style: dotted borders, but it's not a good look.
Your Contact page is also broken, the developers/email doesn't line up with the headers.
I recommend checking out a UI Framework like Bulma, Bootstrap, Semantic, Foundation, or any of the others. I'm not saying you should use these frameworks or toolkits, but you can take a look at the design elements they're using, then take inspiration from them.
For example, a lot of your dotted-line bordered divs are really "alerts". Check out how Bulma designs their notifications:
https://bulma.io/documentation/elements/notification/
Or bootstrap:
I'm not trying to be rude but this is a pretty bad solution. It already looks bad because the height of the second picture is bigger than the first. What will happen with the 4th picture? Go above/below the second? Will it go down and leave an awkward empty spot in the middle of the 4th pictures? Your example can be fixed if every image is resized to a default size (I think whatsapp does it this way)
​
The current issue can easily be fixed with a image carousel/gallery when you send 2+ images but considering they still have you stuck with 8mb file share limit for servers unless you have 7+ boosts...I don't think sharing is a priority for them, unless is stickers and nfts
Have you tried something like bootstrap? If you follow the html from their docs it's really easy to piece together frontends, especially if you're more interested in the backend. Like the navbar component https://getbootstrap.com/docs/4.0/components/navbar/
In case you haven't seen it, Bootstrap has a migration guide on their site https://getbootstrap.com/docs/4.0/migration/. Does not explicitly mention jQuery or Popper versioning though.
It might take some effort since your site is already built, but I highly recommend Bootstrap. Bootstrap's grid system makes designing for web and mobile at the same time so much easier.
They are called accordions Bootstrap example, Foundation example.
I have no experience at all with wix, but html5 now offers details and summary tags to do exactly this and I guess that would be the easiest way to setup with wix.
Its cool but I dont like the fact that they replaced the utility classes ml-x & mr-x with ms-x & me-x
p.s.Really like floating labels
This is without looking at actual code and just making an educated guess.
Media queries to target certain styles as different resolutions, this let's you hide, re-position or completely restyle elements for different devices. To get the Navbar to change they will have used a navbar collapse https://getbootstrap.com/components/#navbar
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/
Although Blazor has a component style, and many vendors provide out of the box components, you still need to understand how web layouts work with html. One example that's a very common framework for layouts is Bootstrap. https://getbootstrap.com/docs/5.1/examples/
​
At our company we use Blazor Server with Telerik controls, which in turn use Bootstrap underneath.
Design your site with Bootstrap then replace the CSS with Geo for Bootstrap to add your 90s flare to it.
For hosting your website Netlify is one of the easiest. Literally drag and drop your folder of files into it and it automatically uploads and deploys it for you for free.
To add your custom domain to it you will want to follow their instructions to change your name servers at GoDaddy for your domain/URL.
Learn some front-end libraries/frameworks. I am very much not artistic either, but things like Bootstrap, Foundation, or Vuetify.js for Vue.Js make it much simpler.
There seems to be a lot more front-end jobs than only Django back-end jobs, as a lot of back-end jobs require Ruby on Rails, Laravel (Ugh!, PHP), or Node.JS rather than Django.
Doing full-stack does make you more employable, as u/Jgrbot mentioned.
If you're working on your own projects, just find a passionate front-end dev / designer if you're not into it yourself.
Right up my alley here! Been building out custom WP sites for years.
I never buy themes. They're WAY too bulky and shitty to "develop" with (they're just drag and drop builders).
Instead, I develop themes using Understrap. It's a starter theme based on Bootstrap 4.
You can find a bunch of tutorials I'm YouTube I'm sure on how to use it.
And then, I use ACF fields to build out the pages.
Turns out, I can develop sites MUCH quicker using a starter template like Understrap, versus fighting with a pre-made theme.
I was thinking of doing a blog post on my blog (a screencast) explaining how to built custom WP themes with ACF and Understrap, as it's a hell of a lot easier to explain over a video!
My recommendation as someone that has been doing this for 8 years, is pay someone. Potentially yes you could create something that works... but it won't work well on all platforms in all scenarios.
As for things that will help you get something built until the above can be achieved, start with the following :
It looks like there's a pretty big knowledge gap here. I would recommend going through a more thorough course in web development, preferably one with projects and lots of CSS emphasis. Here's one that I can personally recommend, but there are lots of good options.
Here's how I'd approach it:
There's two columns. You're going to want to set the structure up for that before anything. Bootstrap is a great framework to use to easily get this done in a responsive way, but there are lots of other ways, including just a bit of your own css.
That font is not standard. Google fonts is probably the way to go to find a similar font.
All the titles probably have a text-transform: uppercase; on them.
Find a good tutorial on how to implement a search bar. Again, these will be a lot easier to follow if you shore up your fundamentals first.
For the webinar links: each should be in a div with a certain class (e.g. class="webinar-link"). The elements inside would be structured with css. As for how to make them look right, it's hard to explain that without just coding it for you. But with some css training the challenge becomes trivial.
I'm still a student myself, but if you'd like to have some guidance on fundamentals I'd certainly enjoy talking to you. PM me if you're interested.
Hey man! I used bootstrap to help me with this:
Look at the source of this example page, the third example (Responsive left-aligned hero with image): https://getbootstrap.com/docs/5.0/examples/heroes/
Specifically this line:
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
flex-lg-row (you probably want it without the reverse) is the class that switches to flex row, once the screensize goes to ‘lg’ or lower. See https://getbootstrap.com/docs/5.0/layout/grid/ for more info.
The flex part of bootstrap docs is usually what I load up in order to remind myself of flex properties even when not using bootstrap.
Its got really clear visuals for space around, space between etc
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>
​
It's hard to definitively say, but if you want to just use the grid there is a distribution that is grid + utilities only and is 29kb minified.
​
https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files
​
You can also use the SASS source to pick and choose parts of Bootstrap to use. If you want to spin something up quick and the grid helps you do so, there's no shame in using it.
This is pretty simple to make yourself, but to get the gist of it, just take a look @Bootstrap docs.
They show a neat example of 'vertical pills' which is pretty much exactly what you're looking for, of course if you want it exactly like your example, you'll have to change the height of the pills accordingly. Hope this helps a little.
I highly recommend looking at Bootstrap for responsive css. It's available on several CDNs, which means if the client has visited another site that uses the same cdn+version, they don't have to download it again.
dont worry, I always have this problem, I don't know the correct name to look it up lol
No. You can use things like CSS Media Queries and just specify that if the screen size is smaller or you are using a specific device, some elements should be displayed a bit differently.
If you are using Bootstrap, you can look up specific classes for creating mobile layouts - e.g. col-md-3 and col-sm-3 (https://getbootstrap.com/docs/4.5/examples/grid/#containers) are working differently on different screens. Bootstrap has already been created with mobile in mind.
I would recommend checking out : https://getbootstrap.com/docs/4.0/utilities/flex/
​
In your case, provided the outer div is a col, the code most probably would be like :
<div class="col-md-12 d-flex justify-content-center">Your boxes inside</div>
Most websites I build only have a small message at the top/bottom of the screen with a link to the cookie policy. They look similar to Bootstrap alerts. An example can also be found in the European Commission handbook (bottom of the page). Much less invasive than a full screen takeover popup.
The Bootstrap theme for Drupal and the Bootstrap navbar component should get you where you need to be. You'll want to customize your html.html.twig file to build a .navbar into the site.
Digging deeper for full page layouts:
Take a look at the work that Jim Birch has done with Bootstrap Paragraphs for Drupal 8.
In a nutshell, you'll want to install the Drupal Bootstrap Theme for Drupal 8, and then install Paragraphs, Bootstrap Paragraphs and Xeno Hero.
Here's his video on implementing everything.
Edge to edge layouts can get tricky to integrate with Drupal. For me, I enabled the .container class in the theme settings, then overrode margins as needed to add them back into the page with CSS.
There are some methods of tweaking the template files as well that are probably programmatically more sound.
Hope this helps!
> This page uses bootstrap 4 default with no additions whatsoever
It's broken on Bootstrap's demo page as well. I'm not sure why you're using a modal component (or any popup at all) for this content.
TL:DR: Learn frameworks, but know when to use them.
I don't personally use frameworks - I find it fun to write pure CSS and I don't have timelines on any of my projects because they're all just for fun. However, I would still recommend learning a couple frameworks, maybe Bootstrap or Materialize. Like everything in life, there are pros and cons to using frameworks.
With frameworks, you can quickly and easily develop beautiful, responsive websites. You don't usually have to worry about how your website will look on different devices, and you usually don't have to worry about whether your design will be cohesive. That being said, frameworks can be heavy, uninspiring / limiting, and very unoriginal. I wouldn't be the first person to say it, but a lot of Bootstrap sites look the same. You're provided all the rules to make a nice, cohesive website, but that also limits what you can do. You end up with a lot bland, similar websites that look nice, but aren't great. On top of that, you're importing 100+kb of css and js to achieve this, which can easily turn people away from your website.
Don't let that turn you off though. Frameworks are tools, and like any tool, they have their place. Designing a simple corporate website that will display on lots of websites? Use Bootstrap. Designing a website for an app that appears exclusively on Google Play Store? Use Materialize. Designing a website for a photographer who has an established brand identity and wants a website to match that? Do it by hand.
The 'card-deck' class in bootstrap 4 will likely give you what you\re looking for.
https://getbootstrap.com/docs/4.0/components/card/#card-decks
If you open inspect the active pill in Bootstraps docs with your browser's DeveloperTools, you'll see that .nav-pills .nav-link.active has the blue background-color property applied to it.
You can change it by adding your own .nav-pills .nav-link.active styles in your own CSS file (make sure your custom CSS file loads after the default Bootstrap styles) with a different background-color.
If you're compiling directly from Bootstraps Sass, there should be some kind of "active color" variable (or something like that. not sure exactly what the variable is called)
The "proper" way to do it would be to import it with Sass and change variables, only include components you need and use the mixins/functions to generate your own versions of components.
> when I looked at it on my iPhone it was only taking up 3/4 of the screen and not working as intended.
I'm betting you haven't got the correct meta tag set for pixel ratios (i.e. mobile devices typically have a higher pixel densities) :
https://developers.google.com/web/fundamentals/design-and-ui/responsive/
<meta name="viewport" content="width=device-width, initial-scale=1">
> Bootstrap is looking to realign everything in columns based on if you're mobile, tablet or desktop... and that's not what I want.
Only partially true. Yes it does use columns / a grid, however you get to determine how many of those columns your content takes up (almost like a way of declaring width).
The default grid has 12 columns, therefore if you specify a class of col-12 (assuming you're using latest bootstrap v4 in beta) then when implemented correctly it should take up the entire width.
https://getbootstrap.com/docs/4.0/layout/grid/
> I want everything to look the same no matter what the width of the device is, I want to keep that "640px width" look, stretched out on small devices but have black bars or background or something on larger devices.
Lol you realize this will look ridiculous and potentially be unusable especially at larger resolutions (1440p / 4K)?
Mimicking a mobile app is fine at smaller resolutions but you need to figure out how to expand this on larger screens, such is the nature on responsive design.
> Bootstrap? Something else? Go hardcore and make all the styles myself? I need a direction.
Doesn't matter where you go, bootstrap, foundation, bulma, skeleton, etc most front-end frameworks will use a grid system to address sizing and layout.
Are you referring to the colored message boxes? It looks like they are using Twitter's open source CSS design template called Bootstrap. This is a stylesheet anyone can use, and it's become very popular among newer websites for a number of reasons. This also means that many of these sites tend to have a similar look to them. Here is an example page with the message boxes, called alerts: https://getbootstrap.com/examples/theme/
Here are two possibilities:
- Provide each topic with a navigation bar to display content. At the moment, you have to scroll through the page to find what is shown. For example, going to Pythagorean from the Sound and Hearing section brings you to a page with temperament, intervals, problems, and the whole tone, but you wouldn't know this without scrolling through the page.
- Provide a responsive website so that the content is easily readable for different screens without the need to zoom in. This is the philosophy behind Bootstrap. On my browser at 100% zoom (normal), the Hyperphysics webpages take up the left, and only the left, half of my screen.
It's a good idea to have a basic knowledge of HTML and CSS, but I recently found that using Bootstrap to theme/prettify your app makes things a lot easier and it does some things for you automatically where you would typically need to roll your own javascript.
I don’t know if you’re using any frameworks but Bootstrap make modals super easy to use.
https://getbootstrap.com/docs/4.0/components/modal/
If you’d rather not use something like Bootstrap you can just hide the containing div (display: hidden;) and then use an onclick event to change the display property.
Nice work OP. It's a little disheartening to hear the criticism of the UX of the site, especially as I don't think that was the focus of the exercise, but don't let it get to you.
That said, bootstrap is one of many CSS frameworks, and it's not at all a PITA to use.
Once again, nice work!
That does not meet the definition of a hamburger menu.
It is a popover. You can easily recreate it using either Bootstrap, or any JS popover library.
Hamburger menus are menus that expand and collapse.
The secret is custom.scss, a duplicate of Bootstrap's built in variables.scss you create and load before the Bootstrap source. You can restyle everything in the framework from one file, in many cases (negative space, for example) programmatically.
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.
Ovo sto oni rade je to sto sam govorio da se prije radilo, server side parsaju user agent i ako je mobile redirectaju na /mobile/.
Sada je sve focus na mobile (mobile first) ali da takoder radi na desktop, napravis jednu stranicu koja radi i na mobile i na desktop i sve izmedu pomocu media querya. Odlican primjer je Bootstrap.
It's difficult to say why something isn't working if you haven't said what you've done. Have you followed the quick start instructions in the Bootstrap Documentation?
Part of your problem is that, while you intend to capture a hierarchical structure, you're using the same pieces to represent both levels. Since they're both pills, there's no visual reinforcement to the hierarchy.
Your top level items could conceptually be thought of as tabs, since they pivot the user between "spaces." Perhaps styling them to look more like tabs would help. The second level are really "actions" that occur within the currently selected space. I'd try to make them look like buttons, to reinforce that clicking on them is more of a "do something" than a "take me somewhere."
If I can use Bootstrap as an example, I'd shoot for something like their tab navigation for the top level and a button group for the second.
I don’t know what version of Bootstrap, so I will use the code from v5 (latest). Here is the code example I found on the official site about drop down menu: https://getbootstrap.com/docs/5.1/components/dropdowns/ and it use “dropdown-menu” class as wrapper of list of menu items which use “dropdown-item” class. But in your 2nd screenshot, you use “drop down-content” for the wrapper and haven’t any class in the drop down items.
P/s I’m just dig in the official docs, so if you need more infos just go straight to the official site and read the official docs.
One way to start getting familiar with HTML and CSS is to use the Developer Tools in Chrome to see how different sites work. For example, here's a list of components in Bootstrap which is a popular library for building web apps: https://getbootstrap.com/docs/4.0/components/alerts/. You can 'Inspect' any element on the page to see the underlying HTML and CSS code, and also modify the code directly to see how your changes affect what is displayed.
A div is the tag name for a generic section, keep in mind that if you want to be 100% compliant to the html standards that may not always be what you want to use. Yet, it may become nitpicking at some point.
https://www.w3schools.com/TAGS/default.ASP
Classes and IDs can be random most of the time, just make sure you keep them descriptive and clear to avoid repetition and confusion.
If you're using an external Framework such as Bootstrap, you're loading CSS and JS files that give your "divs" with a specific class some ready-to-go styling and functionality.
Como decís, bootstrap te da una base "Todo masticado". Que te da lo podes ver en los componentes (https://getbootstrap.com/docs/3.3/components/) según la versión que estés usando.
La parte css que deberías encargarte vos sería la especificidad del diseño que quieras agregar. Si querés modificar, por ejemplo, un color que bootstrap no te da de entrada, ahí crearias una clase css y la agregarias al elemento que quieras modificar, o bien, cosa que no te recomiendo, podes modificar las clases que te brinda bootstrap a tu gusto.
​
Nadie te va a poder decir "en qué parte del Css deberías ocuparte" porque no sabemos que diseño querés hacer, que cosas queres cambiar y que cosas no, eso solo vos lo sabes (o tu cliente). Básicamente lo que deberías hacer es agarrar la base que quieras e ir modificando lo que consideres.
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/
As stated, you can do this in pure html.
https://www.w3schools.com/tags/att_input_type_radio.asp
If you meant bootstrap styling, then yes. Bootstrap can style your radio buttons it’s all in the documentation.
The Bootstrap Grid System has a five tier grid classes that you can use to create a responsive design.
Example:
<div class="col-md-6 col-lg-4 col-xl-3">Hello World</div>
For more examples, see: https://getbootstrap.com/docs/5.0/examples/grid/
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?
Yes, bootstrap is hard to customize. Other than recommending tailwind I would suggest getting the bootstrap source sass files and you can customize it. But you will have to compile it after each edit with a build tool like parceljs
The docs explain some of it but I'd you have any questions feel free to dm me https://getbootstrap.com/docs/5.0/customize/overview/
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.
bootstrap has some nice class utilities for responsiveness. specifically their grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
using the row + col classes and tweaking anything else with css media queries should be all you need
I would not recommend to use any UI Builder. My feeling is, that you would regret it at some point. In my opinion you should spend a couple of days learning a popular UI Framework like Bootstrap (https://getbootstrap.com/). Youtube and the internet is full of documentation.
You don’t need JS to do this. And you’re going want it semantic so it’s accessible & useable via keyboard.
You need a label tag & a checkbox for each option. The label tag’s “for” attribute should be it’s checkbox’s “id” attribute. Style the label tag like a button, rounded corners, borders, etc. Then hide the checkbox input.
Bootstrap has another way to do this as well. This uses JS to set the state of the button but doesn’t change an input.
I see. Mine is that it wouldn't be a similar amount of work. That's cause customizing bootstrap, choosing only what you want from it, takes a trivial amount of work, e. g., http://www.bootstrapcustomizer.com/, https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files, vs. typing it all in from scratch. And then underlying the product will be elements of a robust, tested, well-understood framework, not something jerry rigged by a junior dev. So it does make sense to do it to save development & maintenance costs vs reinventing the wheel.
Page visitors visiting the end product then notice no difference in cpu cost, bandwidth usage, or load time as in either case no extraneous elements are used. Or if they do, it probably means the custom job is lacking something it needs. :)
I can do my best to break it down :
The framework I used for this is google’s Angular 8.
The overall page layout is actually a free template from bootstrap you can find it on their website.
The top Calculator part is what I manually coded using a few basic angular principles (components, data binding, event binding...) and bootstrap front end elements (button groupé, tables, inputs...).
The bottom mortgage calculator, as mentioned on the app, is an external reference to Ratehub’s mortgage payment calculator.
References : https://getbootstrap.com/docs/4.3/examples/ https://www.ratehub.ca https://angular.io
My suggestions
​
- Put the input criteria (players, ante, position, stack sizes etc) to the right of the chart. Saves the button click of opening a pop up.
- Use something like these nav pills (https://getbootstrap.com/docs/4.3/components/navs/) instead of dropdowns to select the components
​
This will make is easy to generate the charts when a tournament is going on.
​
By the way, how are you calculating the Nash Equilibriums?
Bootstrap is a really easy-to-use, responsive CSS template that makes it easy to make good-looking websites. It also allows the site to scale or shift layout when it's used on a smaller screen, like a phone, which would be a really nice feature for it to have.
> 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.
https://getbootstrap.com/docs/4.3/getting-started/introduction/
​
Bookmark that link and familiarize yourself with how the documentation itself is laid out. You don't need to memorize everything, just know where to look for your answers.
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.
Bootstrap and Foundation are CSS frameworks. They include a bunch of premade CSS classes that you just plop right into your HTML. Most often they are used for their grid systems which are easy ways to quickly give your site some responsiveness. You can get started by downloading the files and including them in your project or by including them via a CDN. There are tons of videos out there that will help get you introduced to the basic classes of Bootstrap. Good luck!
What they said; django-girls is great.
For a UI; you can waste years of your life trying to make it look good.
My advice is get bootstrap -as you learn the django templating language try and get as much of the setup into a "base.html" file you extend in other templates.
Then hopefully you can have a "index.html" file which just delivers the content... something like
{% extends "base.html" %} {% block extra-css %} {% endblock %} {% block main %} <h1>Welcome to website!</h1> {% endblock %}
{% block extra_js %} {% endblock %}
This will save you a lot of headaches (and time!)
This is garbage.
Here are a few suggestions:
Design is awful, I understand it's a prototype but no one should go live with this piece of shit. You can use bootstrap, you can use any material design css framework or you can simply buy a template from theme forest.
Lots of bla bla, tell me how you predict prices.
User should not have to type in the month and the price, with 2 lines of code you can autocomplete that for the user. No beer for you my friend.
Have you tried your algo on historical data in order to proof that it can actually predict ?
page title is "Facebook"
Did you hardcode all the pages ? ( creates a own template for every ticker symbol )
Popper.js is required for tooltips, popovers and positioning of dropdown menu's: https://getbootstrap.com/docs/4.1/getting-started/javascript/#dependencies
As for the speed, I don't know what's happening to be sure, maybe you can try another CDN provider like: https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js or https://unpkg.com/[email protected]/dist/umd/popper.min.js
> people using it in different ways not knowing some of the features it contains
Not Bootstrap's fault
> Most people just take the entire framework
You don't have to take the entire framework. It's documented here: https://getbootstrap.com/docs/4.1/getting-started/theming/#importing
> Now I need jquery
You don't have to use jQuery with Bootstrap: you can just use the CSS part only if you want. This is how React-Bootstrap, reactstrap ... work.
> Bootstrap has lots of features. [...] many people don’t know them all
Not Bootstrap's fault
> Let’s stop reinventing the wheel guys! [...] I’m going to go vanilla. Stop using frameworks altogether.
This is exactly what you will do when ditching a CSS framework: "reinvent the wheel" (grid, device breakpoints, tables, forms, buttons, cards, modals...).
Aside from the more important tags like <p> and <button> HTML5 tags are largely just up to developer preference since they have little to no bearing on functionality.
Most developers who make non-WordPress websites professionally end up using a styling framework like Bootstrap that provides classes to cosmetically transform a <div> into basically any other tag.
1) I haven't met a professional developer that doesn't use some sort of IDE. Even if you were the best developer in the world and used notepad, you'd be much better using something like VS Code, IntelliJ, Atom etc. Sure people use VIM et al, but I always assumed they had extensions/plugins that did some of the same things as a full fledged IDE. Short answer, use an IDE.
2) Do yourself a favor and start using Bootstrap early on. Most places are using bootstrap or have used it (legacy code you will probably maintain) and its always good to get a grasp on a few things at once without realizing it. It's just a CSS library per say so it can only help you. That being said, to be more direct towards your original question: bootstrap has a starter template in their introduction found here: https://getbootstrap.com/docs/4.1/getting-started/introduction/
Generally when I am learning/prototyping, I'll use bootstrap + the starter template to instantly have a site that will be cross browser/device compliant.
Just some tips that I have learnt in my 10ish months of WebDev
- I would definitely give bootstrap a go. It is an amazing framework for making websites responsive.
- Using Pixels is good for some cases but I try to use vh and vw. This breaks the screen width and height into 100 parts - meaning 1vh = 1% of screen height.
- Using percentages is also a must really
- When it comes to media queries, they are good for most cases but when you can avoid them. DO!
- As I use bootstrap, they have a set grid system with specific pixels. Bootstrap Grid Dimensions.
- The responsive tool on chrome is definitely extremely useful but I have found that sometimes, rarely, that it is not accurate.
Hope I helped a little :D
you can use whatever language you want for the server. php somewhat continues to fall out of favor but it's fine if you're familiar with it. contrary to /u/Dazza93's opinion, i dislike node about as much as i dislike php. my default these days is to use c# via asp.net core. but again, use whatever you want. i just want to point out that using node is not something that's blanket adopted as the way to go for this type of stuff.
server-side rendering of views (what you're probably used to doing with php) has also somewhat fallen out of favor. most people will use a front-end framework for rendering views now. popular ones are angular, react and vue. vue is the newest hotness. react is the most popular currently but people seem to be getting tired of it a bit (especially after the license fiasco). i prefer angular because typescript is the default and i also prefer the dependency injection method of passing things between components and such.
as a side note, angularjs refers to the older angular 1.x stuff, while angular refers to the new angular 2+ stuff. they're basically two separate frameworks.
because view rendering is usually done in the browser now via those javascript frameworks, your server-side code usually winds up just being a RESTful web api.
as for 'looks', there are plenty of ui frameworks. bootstrap is still going strong (https://getbootstrap.com/). various material design implementations are on the rise (https://material.io/design/, just google frontEndFrameworkOfChoice material and you'll probably find a couple implementations).
data management on the back-end would just be basic database stuff.
Why don't you just use a CSS framework? Twitter Bootstrap is a hugely popular one, but if you're pressed for resources something like PureCSS would also do the job.
I'd say that Bootstrap is definitely easier to get started with if you have no wish to work with CSS.
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/
You need to separate between popup windows and popup modals. Popup windows are when there is a separate browser window that appears. Popup modals are when JS changes the website HTML/CSS in order to show a hidden element over the top of the website <- This is something you can't stop.
A good example of the latter is when you logout of reddit and then click the login button. See how this popup modal allows you to login without navigating away from the page?
I've got bad news for you. As websites and browsers become more complex and the everyday web developer becomes more skilled, it's only going to become more common. It's a standard feature in most website frameworks (see JQueryUI or Bootstrap) and it'll continue to be used for all purposes.
>Here is the code in full in a Google Doc
Don't use documents to share code; it eats formatting and is generally an inefficient way to pass text around like this. Especially don't share code with screenshots.
Use something like pastebin or Github Gists. Or just put the code here; that's not very much at all.
I'd assume that a large part of your problem is that Bootstrap provides some default styling for forms, and you have your entire page wrapped in one.
But that's only part of the problem. You also haven't actually used a navbar. You've used a nav, which is different in Bootstrap. Navbars can contain navs.
Start by reading this page:
https://getbootstrap.com/docs/4.1/components/navbar/
And move your navbar code outside your form.
Edit: as a final side note: if this is a learning exercise, I strongly recommend skipping ASP.NET Web Forms and moving on to ASP.NET MVC. Web Forms was hot garbage when it was new, and it certainly isn't new these days. MVC isn't even "new" anymore; it's something like a decade old. Web Forms is a lot older, and there's a reason it's basically abandoned. The biggest problem with it is the ViewState (google ASP.NET ViewState if you want to know what I'm talking about), but that's just the beginning. Web pages simply don't work like Windows Forms, and ASP.NET Web Forms was a bad attempt at making it do so. ASP.NET MVC doesn't suffer from the same issues, and developing for it is much more like developing standard web sites instead of using these concepts of "controls" and runat="server".
You can change gutter space globally if you are using sass version. https://getbootstrap.com/docs/4.0/layout/grid/#columns-and-gutters.
But if you need custom gutter spacing for few sections, you have to understand how gutter space work in bootstrap.
In bootstrap, there is no space between columns like with grid-gap it comes. columns are meant to be wrapper without any style. Bootstrap add padding of ($gutter-space/2) on each of the columns so the content of two columns is separated by $gutter-space. And then to remove extra space from start and end of the row, it gives minus margin of (-$gutter-space/2) on the row.
So you can do the same thing to add custom gutter space. Something like
.gutter-60 {margin:0 -30px;} .gutter-60 [class^="col"] {padding: 0 30px;}
And add the gutter-60 class on the row element
What you want to do here is use Sass, and only import the parts of Bootstrap that you actually need (see here). Can't have compatibility issues if you don't even import Bootstrap's grid system.
Letztendlich wird immernoch mit HTML und CSS dargestellt. Mit einem Baukasten lernst du mMn gar nichts wenn es um Programmierung geht. Wordpress könnte was sein, wenn du aber tiefer einsteigen möchtest dann bist du auch direkt im komplexeren PHP/HTML/.. Wenn du schnell hübsche Ergebnisse haben möchtest, die sicherheitstechnisch keine Lücken in dein CMS reißen kann man mMn auch (https://getbootstrap.com/)[Bootstrap] empfehlen.
There even less of an excuse for bad responsive design when there's open source front-end frameworks available such as Bootstrap that's already done most of the legwork for the developer.
If you don't want to bundle Bootstrap with rest of your assets, just use CDN they have.
Look at the starter template: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template
If you want to use mixins/variables then use bootstrap-rubygem (not bootstrap-sass)
Some feedback:
- I totally agree with the needs more pictures idea.
- You should consider implementing the table of contents in real time like https://getbootstrap.com/docs/3.3/components/#thumbails - as it's pretty jarring to be halfway down the rules, to open the contents, only to be jumped back to the top, and not really have any real time tracking as to where you are.
- Currently for me, the table of contents covers the rules, which also is a bit jarring for me personally, i don't see a reason why you couldn't see both at the same time.
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.
It is common these days to use a front-end framework like Bootstrap, which is essentially a collection of pre-fab components you can easily assemble into a full website without truly building from scratch. However, it is essential to know basic HTML and some CSS if you want to be effective at all. Use a chair but also know how to stand.
If that's the case your screen may not be big enough. The number is the size of the div and they have to add up to 12. so two 6s, the 4s, six 2s or whatever else adds up to 12. The md stands for medium. There is also xs (Xtra small) sm (small) and lg (large). These are at what size the columns rearrange to wrap around to the next row. So a col-lg-6 would take up half of the 12 spaces available and would when the window width is below a certain number of pixels (1056 I think but it's been a while) the columns start to wrap around to a new row.
They're pngs. It doesn't matter if they have excess white.
You put the three columns in one container, make three equal width divs in the container for the columns, and in each column you make two divs: one for the image and one for the text.
Then you display:inline-block the images. Done. This is seriously how it's done. No screwing around with cropping or resizing images. Css and container divs.
You should check out bootstrap grid
Dropdown is a class name used by Bootstrap. I'm guessing Bootstrap is trying to take over control of the dropdown logic. Either try using bootstrap classes or rename your classes. Bootstrap dropdown documentation.
Firstly, your first screenshot shows you didn't finish the download and installation process. Its still asking you to proceed.
Second, you say you don't think it worked but won't tell us why you think it didn't work.
Thirdly, the code and error you show seem to have nothing to do with bootstrap but with image loading. So what do you want?
Lastly, if you don't know how to include files (yet), and are just trying stuff out, why not use the bootstrap cdn? https://getbootstrap.com/docs/5.1/getting-started/introduction/
[edit] Also that bootstrap package seems very outdated.
Yeah, if you’re still working on your design skills…why not use a framework?
Some frameworks you can check out:
I've just been starting out with Blazor as well. One thing that has helped me is to look at the Bootstrap documentation for things, because it seems like Blazor and MudBlazor (which I am also using) heavily rely on Bootstrap for layout and look and feel. Some of the docs on the Bootstrap layout for grids has been helpful to me to try and figure out how things are working. I am far from being an expert, but maybe those pages would help you too. https://getbootstrap.com/docs/4.0/layout/grid/
>it's always fascinating to see what someone who just a designer comes up with
Yes, I feel the same way. I've seen projects on Behance and Dribbble that look nice but awful to build. I too design and always put usability, simplicity, and consistency above flashy graphics.
​
>As for grid, I meant like CSS grid. Idk if Bootstrap has started using it yet
The Bootstrap grid is built using Flexbox, not CSS Grid. I must admit, my knowledge of CSS Grid is very limited as I've only used it once. At my company, Internet Explorer support is a requirement so I can't ever use CSS Grid since it's not supported on IE. But I get what you mean. Nevertheless, the Bootstrap grid system is fantastic and is excellent for responsive web design. It has not let me down so far since we've adopted it at my company.
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...
If I understand correctly then you have build your API server with data already. Then it is really simple, just modify your Node server by adding a render engine, and render the data to html and you are good to go.
About UI and css stuff, I recommend use Boostrap and you can build a decent admin page with not much effort. It is very easy to use and setup.
Resource:
- Render engine: handerbar or ejs
- Boostrap: bootstrap
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
I would use Bootstrap for the columns - https://getbootstrap.com/docs/4.0/layout/grid/
You can use the_post_thumbnail() to display each posts featured image. - https://developer.wordpress.org/reference/functions/the_post_thumbnail/