Git Product home page Git Product logo

startbootstrap / startbootstrap-modern-business Goto Github PK

View Code? Open in Web Editor NEW
996.0 72.0 1.2K 4.28 MB

A multipurpose Bootstrap full website template created by Start Bootstrap

Home Page: https://startbootstrap.com/template/modern-business/

License: MIT License

JavaScript 11.49% Pug 87.71% SCSS 0.80%
bootstrap html bootstrap4 bootstrap-4 bootstrap-theme bootstrap-template open-source free themes theme

startbootstrap-modern-business's Introduction

Modern Business is a multipurpose, full website template for Bootstrap created by Start Bootstrap. This template includes 17 unique HTML pages and a working PHP contact form.

Preview

Modern Business Preview

View Live Preview

Status

GitHub license npm version

Download and Installation

To begin using this template, choose one of the following options to get started:

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with dist directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Usage

Clone the source files of the theme and navigate into the theme's root directory. Run npm install and then run npm start which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the package.json file to see which scripts are included.

npm Scripts

  • npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
  • npm run build:assets copies the files in the src/assets/ directory into dist
  • npm run build:pug compiles the Pug located in the src/pug/ directory into dist
  • npm run build:scripts brings the src/js/scripts.js file into dist
  • npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
  • npm run clean deletes the dist directory to prepare for rebuilding the project
  • npm run start:debug runs the project in debug mode
  • npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

You must have npm installed in order to use this build environment.

Contact Form

The contact form available with this theme is prebuilt to use SB Forms. SB Forms is a simple form solution for adding functional forms to your theme. Since this theme is prebuilt using our SB Forms markup, all you need to do is sign up for SB Forms on Start Bootstrap.

After signing up you will need to set the domain name your form will be used on, and you will then see your access key. Copy this and paste it into the data-sb-form-api-token='API_TOKEN' data attribute in place of API_TOKEN. That's it! Your forms will be up and running!

If you aren't using SB Forms, simply delete the custom data attributes from the form, and remove the link above the closing </body> tag to SB Forms.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

About

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

Start Bootstrap was created by and is maintained by David Miller.

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2023 Start Bootstrap LLC. Code released under the MIT license.

startbootstrap-modern-business's People

Contributors

davidtmiller avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

startbootstrap-modern-business's Issues

News Letter Sign-up Form Email Field & Submit Button

Problem

The Current edition of modern bussiness "News Letter form" does not show as expected in Mozilla Firefox 108 64bit on linux mint.

image

Origin

This behaviour is because of Firefox relay addon which edits page styles on the fly:

Possible solutions:

  1. Disabling addon

  2. Editing styles.css file at lines 2743 & 2744 as follow may help:
    flex-wrap: nowrap;
    align-items: initial;

However, it still has some button size problems in smaller screens. i.e. the sign up button gets a bit bigger.

How about a common menu?

I took the menu out and put it in a separate file, mmenu.html and fixed the duplicate DropDownBlog.
In every other HTML file I repalced the

... with,
.
At the bottom, right after <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> I added,
<script>
$('#navigation').load('/mmenu.html');
</script>.
Now, there is a single menu for all pages, makes it easier to use.
I also found some bugs such as an extra in one file and obsolete attributes in use in other files by using the w3c html validator.

Duplicate ID navbarDropdownBlog

Hi
Found Error: Duplicate ID on validation
id="navbarDropdownBlog"
id="navbarDropdownBlog1"
This seemed to work just changing the id blogg to blogg1
not sure what would be the best outcome

Johnc

"Bootstrap 3.2.0" still on index.html

Just a friendly FYI -

yup

3.2.0 shows twice on the homepage.

Copyright © Your Website 2014 is in the footer, too. Minor but noteworthy in case you want to update the year.

Support for 3 level navigation

Could you add example how to solve 3 level navigation?
I couldn't find any example when using divs for second level.
Thank you

Cannot get contact form to work

Unable to get the contact form to work. When I checked the contact_me.js it looks like $this is undefined in three instances.
22 $this = $('#sendMessageButton');
23 $this.prop('disabled', true);
70 $this.prop('disabled', false); // Re-enable submit button when AJAX call is complete

and that the submitError: function is defined but not used.
I am not versed in JS so I am just guessing that maybe this is part of the issue. I haven't seen a contact form that did not have form action specified in the html so I am uncertain how this form is supposed to work. Thanks for any help.

Change slide picture

Hello and great job already.
I want to know how to change the slide lines for my pictures to me?
In this line for example:

</ div>
I tried to change with
</ div> which is the root of my site, but it does m 'not display my house photo. thanks for your help

Refused to load the font 'data:font/woff;base64

Downloaded and fired up a simple NodeJS server... the sites index page is comes right up. When I try to go to any other page I get this CSP error. I've tried setting the CSP various ways but nothing is working. Any ideas? Anyone run into this before? Many thanks!

PS...love the template.

Footer not stay bottom

Hi,
Footer not stay bottom always. If you have website content less and footer will come up. How to keep the footer bottom?

Nuget Package Dependency

When pulling a fresh copy of the solution and then installing the Nuget packages, the following error message display for all the projects in the solution.

ModernBusiness.Pages.Faq depends on OrchardCore.Forms (>= 1.0.0-beta3-71165) but OrchardCore.Forms 1.0.0-beta3-71165 was not found. An approximate best match of OrchardCore.Forms 1.0.0-beta3-71500 was resolved.

Cannot get carousel to activate

Hello,
I am very new to Bootstrap, HTML, CSS and JS.

I downloaded this theme which is wonderful on the website but the actually downloaded html pages do not accurately reflect the preview pages-maybe this is normal but it is not what I have experienced in other themes I have downloaded but like I mentioned, I am new to all of this. It is easier for me to start out with a template and comment out or change certain parts to see how the page reacts.

The home/index page is incredible although the download I have looks nothing like the preview including the menu which I cannot get to collapse or toggle even though I did not change anything but that is separate issue. What I was most interested in with this theme was the carousel but I cannot get the carousel to activate. I have tried various web searches and have copied the html exactly and checked the JS but still I cannot get the carousel. Even with the theme, the only thing I edited was the actual placeholder image but still not working. What I can get are full width images on the screen and that is it-no carousel. There is something I am obviously missing but I do not know what it is so any help/guidance provided would be appreciated.

Thank you for your time.

Detailed Footer & highlight in navbar

1.The footer if the page can contain links of related websites,ideas and companies the website is designed for . It can also contain next and previous page links .
2. The current page must be highlighted in the navbar to avoid confusion to the user .
Example :If about page is open the link of about in the navbar must be highlighted.

FAQ accordion example duplicate IDs

When collapsing the accordion example on the faq.html page, duplicate IDs between the "Account & Billing" accordion and the "Website Issues" accordion cause two expand/collapse behaviors to fire.

Duplicate IDs:
collapseOne
collapseTwo
collapseThree

Proposed solution: Update IDs to be unique.
collapseOne
collapseTwo
collapseThree
collapseFour
collapseFive
collapseSix

Please let me know if you need additional info. The new BS5 templates/themes look outstanding.

Nav Link Dropdown Toggle Isn't Working Despite Having Same Code and Same Reference

I'm having issues with the navbar fixed-top class on some of my webpages. The dropdown appears fine on some of my pages but on others it won't show up. For reference, I am using

`

`

and I am using the same code for all the navbars yet the dropdown is not working for me in other pages. Is there a way to fix this issue, because it does not seem to be working. For reference, here is where the problem lies.

<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tested Positive </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> <a class="dropdown-item" href="quarantine.html">Quarantine</a> <a class="dropdown-item" href="isolation.html">Isolation</a> </div> </li>

Change header background and font colors

Sorry for newbie question and I have tried and now hoping for help. I have added a new .css file and tried to change the formatting of every class in the navigation section (navbar, navbar-inverse, navbar-fixed-top, navbar-header, navbar-brand, nav, navbar-nav, navbar-right..etc). I really just want to change the background to from black to blue(ish), the text from silver to white, and the text hover from white to silver. I need to do the same with Sidebar Pages' side menus but I'm hoping if someone helps with the header I can figure out the rest. Please help...I can PayPal some dough if that what it takes. Thank You.

login/signup pages?

thank you for the template. i wish it had sign-up and login pages too. also, there is no search bar in the pages. it is necessary for the large sites.

carousel height change

How can I edit the carousel height?

I have found there is .carousel-inner item in the file vendor/bootstrap/css/bootstrap.min.css

When I have tried to add there parameter like: max-height: 200px, nothing happened.

The whole template is really really cool, but the carousel is too big...

Thanks for an advice,
Rene

Bug at navigation

Hello,
sry for my english.
If the menu is slightly larger and you look at it on a smartphone, then you can not scroll the menu.

image slider don't scale, and text is not visible on mobile view

When browser window is resized smaller/narrow or on mobile view, the pictures in the slider get cropped, so that central part of images are shown.

I solved these 2 issues by removing hight and min-height from .carousel-item and adding height: 56.25vw, in modern-business.css.
To make text appear, carousel option div has to use only carousel-caption class, in index.html.

Hiding the sidebar on mobile

Hi there, Is there a way to hide the sidebar on the mobile view? I've got a long one, and UX-wise, I'd rather the view just see the page headline when changing pages and not the sidebar again. They may not even realize they're on a different page.

I tried the .hidden-sm and .hidden-xs to no affect, but then again, I'm new to bootstrap and might be implementing it wrong.

http://www.edisoncg.com/edisonmfs

Any suggestions?

Thanks,

Tom

Slider text cut off on mobile

I love this template! Thank you!

That said, having a small problem. The text captions on the slider are getting cut off on my iPhone 5s (portrait or landscape, in Safari and Chrome) and in landscape on a 7" Kindle Fire.

On the desktop, when I shrink the browser's width, only the longest quotes get cut on the top, but on the iPhone 5s, 75% of the slider image itself, along with the text, is not visible in landscape. I get 4 lines of text in Portrait but can only see the slider indicators in Landscape.

Note, I did increase the size of the header to accommodate the logo.
.navbar-brand{float:left;height:50px;padding:5px 5px;font-size:18px;line-height:20px}

But I don't think that accounts for all the missing text.

Screen caps from iPhone5s:

2016-02-24 12 22 52
2016-02-24 12 22 43

Any suggestions?

Thanks,

Tom

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.