We help IT Professionals succeed at work.

Bootstrap under the heel?

High Priority
330 Views
Last Modified: 2017-09-01
http://halohimalaya.com is using bootstrap. My question is: is it using anything else which will conflict with it, as i don't want the pages to become difficult to control at different media sizes?
Comment
Watch Question

Jim RiddlesPrepress/OMS Specialist
CERTIFIED EXPERT

Commented:
A quick look at the developer console in Chrome shows these sources in use:
SmoothScroll.js
bootstrap.js
jquery.1.11.1,js
jquery.isotope.js
main.js
modernizer.custom.js
owl.carousel.js

As far as to your question about conflicts, I would have to guess that the answer is "no", as the site functions with no errors.
CERTIFIED EXPERT
Top Expert 2016

Author

Commented:
OK. I'm finding the whole design pretty confusing, all the same
Developer & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
Bootstrap is primarily a responsive css grid. There are some javascript/jquery components https://getbootstrap.com/docs/3.3/javascript/ but primarily you would be concerned about one css class (much different than a java class) over riding another.

As example
<style>
.highlight {
      color:red;
}
</style>
<style>
.highlight {
      color:blue;
}
</style>
<p class="highlight"> I am blue</p>

Open in new window

This would be the same as having two different style sheets loaded with each defining the class,'highlight'.
<link href="css/theme.css" rel="stylesheet" media="screen">
<link href="css/another_theme.css" rel="stylesheet" media="screen">
<p class="highlight"> I am blue</p>

Open in new window


The style that gets loaded last (bottom) will override the previous style.

The only potential thing I see on your site are these style sheets that load last.  
<!-- Stylesheet
    ================================================== -->
    <link rel="stylesheet" type="text/css"  href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/events.css">

Open in new window

There is a responsive.css style sheet that you would assume does what bootstrap does. But after looking at it, the styles defined are not the same as bootstrap and there are only very few.  

There is nothing wrong with redefining some styles in a previous style sheet especially for something like bootstrap.  They have classes for things like "warning", "success", "danger" etc. You may want to override with your own colors and it would be normal to have a style sheet loaded after bootstrap called custom.css that would redefine.

Looking at the html, using classes for container, row and col-lg-4 etc, those are all bootstrap classes. For the most part everything looks good.
 <div class="container">
                <div class="row">
                    <div style="color:maroon" class="text-left col-lg-4">

Open in new window


If you want to be nit picky, you would loose the inline styles like, style="color:maroon" and instead define that in your css.  Inline styles override any defined css in the linked style sheets or between style tags.  Using inline styles makes the page harder to manage. For one thing, think about if you ever changed the color.  You would have to go back to all pages where that style is defined vs updating one style sheet.

Is there anything in particular you are worried about? or have seen break?
CERTIFIED EXPERT
Top Expert 2016

Author

Commented:
Nothing in particular worries me. I just find the page confusing. The overlay is somewhat irritating. I'd be more comfortable were it all simplified to use only bootstrap
Scott FellDeveloper & EE Moderator
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Bootstrap only has basic styles mainly for the responsive grid and some helper styles for things like coloring alerts.  You still need your custom styles (though not required).  

Simplified could mean merging everything to one css file.  But it you are talking about the parallax effect where as  you scroll down the home page the background image disappears and reappears with text floating over, then you are better off starting over because as you start to remove one thing, something else breaks or changes to an undesirable look.

Take a look at the jumbotron example http://getbootstrap.com/docs/4.0/examples/jumbotron/.  This could be the base where the jumbtron has an image of what you have now.
CERTIFIED EXPERT
Commented:
Hi,

One of the biggest problem I see, there is a conflict about the height of the page with the menu and footer calculation.
Plus there are 2 scroll bar one in the code and the other one is the browser, so when scrolling the problem occur (using Chrome).

Overall design need improvement and fonts on images are hard to read..

I would recommend using a ready to use template so it will be faster to complete your site.
https://themeforest.net/item/citytours-city-tours-tour-tickets-and-guides/10715647
demo: http://www.ansonika.com/citytours/color_2/index.html

This one is well rate too
https://themeforest.net/item/travelo-travel-tour-booking-html5-template/8346649
CERTIFIED EXPERT
Top Expert 2016

Author

Commented:
That site's probably going to go Wordpress, but there could be scope for an interim pure Bootstrap simplification
CERTIFIED EXPERT

Commented:
You will need custom CSS for what Bootstrap does not cover, and there are a lot....
You will also need some custom JS and third party JS script like most website.

If you plan to have it under Wordpress this is going much work and much complicated so I recommend you to hire a dev or if you are on a budget simply buy a theme or a template.

There are plenty cheap  Wordpress theme ready to use, that is going less expensive and you will have a very nice site
https://themeforest.net/category/wordpress

By buying a theme or a template you will be able to understand more how Bootstrap work, this is the best way to learn.
CERTIFIED EXPERT
Top Expert 2016

Author

Commented:
Thanks folks. Still thinking about what to do.  Shall probably start new WP site

Explore More ContentExplore courses, solutions, and other research materials related to this topic.