Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Strange Bootstrap problem

    Hello,

    Im trying to learn HTML/CSS using Bootstrap, so for a hobby project I am trying to create a little website. However I have the strange problem of a row not centering 3 containers, they are off to the left and I have no idea how to correct them. This is what it currently looks like: https://imgur.com/a/bSVPyUR
    I just want the different boxes centered under the text. Can anyone point me in the right direction in what I am doing wrong? This is the HTML code;


    Code:
     <section id="services">
          <div class="container">
            <div class="row">
              <div class="col-lg-12 text-center">
                <h2 class="section-heading">Technische specificaties</h2>
                <hr class="my-4">
              </div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box mt-5 mx-auto">
                  <i class="fa fa-4x fa-arrows-alt text-primary mb-3 sr-icons"></i>
                  <h3 class="mb-3">Afmetingen</h3>
                  <p class="text-muted mb-0">Lengte = 4.78m<br> breedte = 1.98m<br> diepte = 0.30m </p>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box mt-5 mx-auto">
                  <i class="fa fa-4x fa-balance-scale text-primary mb-3 sr-icons"></i>
                  <h3 class="mb-3">Gewicht</h3>
                  <p class="text-muted mb-0">Leeggewicht = 420kg,<br>Max. gewicht incl. passagiers & motor = 700kg</p>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box mt-5 mx-auto">
                  <i class="fa fa-4x fa-rocket text-primary mb-3 sr-icons"></i>
                  <h3 class="mb-3">Motorisering</h3>
                  <p class="text-muted mb-0">Mercury F60 ELPT EFI 44.1KW(60PK) vier-takt motor incl. hydraulische motorlift.</p>
                </div>
              </div>
              
                
        
            </div>
          </div>
        </section>

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by JaneSport View Post
    Im trying to learn HTML/CSS
    Cool...

    Quote Originally Posted by JaneSport View Post
    using Bootstrap
    Well, there's your problem. The ONLY thing you can learn from bootcrap is how not to use HTML or CSS properly, hence my advice typically being to go find a stick to scrape that off with before you go tracking it all over the Internet's carpets.

    But, since you only have three items, perhaps that you're declaring a 6 and a 5 size are contributing to the problem? NOT that ANY of those classes and most of those div are serving any legitimate purpose in your code.

    When I say bootstrap teaches you how not to write HTML, that's not a joke. The HR immediately after the H2 for example breaking what the heading means and starting a new subsection kin to the heading... the text content of in there are not grammatical paragraphs so P is completely the wrong tag. Half (or more) of those DIV having no legitimate reason to even be in your markup, much less the endless pointless classes for nothing doing the job of one id and one class used three times. There is NO reason for the HTML of such a simple section to vary significantly from:

    Code:
    <div id="services">
    	<h2>Technische specificaties</h2>
    	<div>
    		<i class="fa fa-4x fa-arrows-alt"></i>
    		<h3>Afmetingen</h3>
    		Lengte = 4.78m<br>
    		breedte = 1.98m<br>
    		diepte = 0.30m 
    	</div><div>
    		<i class="fa fa-4x fa-balance-scale"></i>
    		<h3>Gewicht</h3>
    		Leeggewicht = 420kg,<br>
    		Max. gewicht incl. passagiers & motor = 700kg
    	</div><div>
    		<i class="fa fa-4x fa-rocket></i>
    		<h3>Motorisering</h3>
    		<p>
    			Mercury F60 ELPT EFI 44.1KW(60PK) vier-takt motor incl. hydraulische motorlift.
    		</p>
    	</div>
    <!-- #techSpecs --></div>
    Everything else you are doing belongs in your external stylesheet, not in the HTML. ... and I probably wouldn't even have the font-awesome stuff added in the markup, preferring generated content -- but I'm a purist. Bootstrap is making you work harder, not smarter, and anyone telling you it is easier, or simpler, or faster, or "helps with collaboration or working in teams" is talking out their arse; flapping their cheeks in the wind.

    Christmas day so this is a drive-by post, but if I have time tomorrow I'll code an example of that working... but really here's a quick tip, if some "framework" or someone tells you to use classes to say what you want things to look like, they have ZERO blasted business telling you how to build a website. This is why bootstrap is a mentally-enfeebled train wreck disaster and its fans, users, and even creators are utterly unqualified to write a single line of HTML or CSS.

    Literally, the people who CREATED bootstrap aren't even qualified to make websites.
    Last edited by deathshadow; Dec 27th, 2018 at 12:27 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,915
    Thanks
    36
    Thanked 1,058 Times in 1,054 Posts
    I am agreeing with DS here. bootstrap is not how you want to learn HTML/CSS. Go here https://www.w3schools.com or look at https://www.freecodecamp.org/ or edX | Online courses from the world's best universities and any one of 880 different FREE sites OR search YouTube. BUT stop using bootstrap.

    Welcome to the forums and if you have question about what your learning come on back and ask for help.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by sunfighter View Post
    I am agreeing with DS here.
    Whilst I have to disagree with your pointing them at W3Schools; in fact I'd sooner see us all sucking the business end of a loaded shotgun than point beginners at their outdated incompletely disinformation and outright lies. Going from Bootcrap to W3Schools is like going from Mary Kay to Amway on the scam factor. In fact I cannot comprehend how anyone who is qualified to use HTML would ever even think to point someone at their broken outmoded bull****. The laugh being they've been outdated incomplete BS almost from the day they launched their site.

    Much like how "Friends don't let friends drink Starbucks", friends don't let friends use W3Schools. Great, now I want that on a T-Shirt

    I suggest MDN:

    https://developer.mozilla.org/en-US/docs/Web/Tutorials
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,915
    Thanks
    36
    Thanked 1,058 Times in 1,054 Posts
    We all know how much you hate the folks that bring us that easy to learn from site. MDN is a great site for people that already know HTML ------ but not a good place to start. Many better teaching sites available as I said.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Alright, here's that full version I mentioned coming back to do:

    Index of /for_others/JaneSport/ - CutCodeDown

    The CSS -- assuming a reset is in use -- goes like this:

    Code:
    #services {
    	text-align:center;
    	padding-bottom:2em;
    }
    
    #services h2 {
    	font:normal 150%/120% arial,helvetica,sans-serif;
    	padding-bottom:2em;
    	color:#000;
    }
    
    #services h2:after {
    	content:"";
    	display:block;
    	width:2em;
    	height:3px;
    	margin:1em auto 0;
    	background:#E64;
    }
    
    #services div {
    	display:inline-block;
    	width:16em;
    	margin:0 1em;
    	vertical-align:top;
    }
    
    #services h3 {
    	font:normal 150%/120% arial,helvetica,sans-serif;
    	padding:1em 0;
    	color:#000;
    }
    
    #services .fa {
    	color:#E64;
    }
    Which is relatively simple. So simple in fact that the rewritten HTML plus this CSS is still smaller than the HTML bootcrap would have had you write...

    But tell me again folks how much "eaiser' or "better for working with a group" sleazing out three times the markup is. This is why HTML/CSS frameworks are a giant LIE based in ignorance and incompetence, and why no beginner should ever be pointed at them!

    Everything in it is center aligned so say that once on the container, style the heading, create that dividing line (which should NOT structurally be a HR!!!) using generated content (laughably the most complex thing in this code), set the inner DIV to inline-block so they appear on one line with a nice 16EM width so that they're elastic, and for now a nice responsive plan being to just let them wrap when the window is too small. Throw in some padding to space things apart, colourize what needs colour, and we're done. Assuming that warm grey of your flow text is set on BODY as I did in the live demo.

    That what you're trying to do? My advice, learn to use HTML and CSS properly before you let any of these halfwitted "frameworks" start pumping you full of manure. Again, the only thing you can learn from them is how NOT to write HTML or CSS. ANYONE telling you to use bootstrap isn't qualified to tell anyone how to build websites -- and that includes its creators! Mind you, not a popular opinion, but it's the truth! Truth often hurts.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  7. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by sunfighter View Post
    We all know how much you hate the folks that bring us that easy to learn from site. MDN is a great site for people that already know HTML ------ but not a good place to start. Many better teaching sites available as I said.
    No offense, but have you even bothered READING MDN's tutorials section? Or have you only ever seen their reference?

    https://developer.mozilla.org/en-US/...etting_started

    About as simple as you can get. Nothing wrong with MDN's tutorials... whilst W3Fools ignorant manure packs people as full of incorrect information and broken practices as possible. One look at their incompetent framework "w3.css" being MORE than enough proof of that. They are unqualified to tell people how to build websites, and if it "looks" easy that's just an illusion used to dupe people into thinking that their sloppy incomplete disaster is legit. Their entire site has a history of two-faced lying about who and what they are, what they offer, and only came to prominence by actively promoting ignorance.

    I truly pity all the people suckered into thinking they were useful, their heads so filled with BS they'll have to unlearn sooner or later; though as front-end frameworks continue to prove, some people just can't extract their craniums from 1997's rectum when it comes to using HTML and CSS properly.

    Mein gott Billy's dad packs less fudge than W3Fools.

    "Easy to learn from" isn't a good thing if 80%+ of what they teach is WRONG!
    Last edited by deathshadow; Dec 27th, 2018 at 01:20 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  8. #8
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,915
    Thanks
    36
    Thanked 1,058 Times in 1,054 Posts
    No offense, but have you even bothered READING MDN's tutorials section?
    Spent some time comparing the two (MDN and W3Schools) They have different styles of teaching. W3Schools is arranged nicely and the lessons short and simple. They could include more information and examples, but over all I still believe this is a good place to start your learning. MDN includes way too much sometimes. More then once I didn't understand why they kept giving me info that made no sense to a beginner.

    Will still tell people with limited skills and knowledge to go to W3. MDN is not for newbies. It's good on your second or third time studying. Have you read their lessons recently?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  9. #9
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by sunfighter View Post
    Have you read their lessons recently?
    Same old crap they've always had.

    the <h1> element defines a large heading
    no, no it doesn't. "Large" is appearance, which has not one blasted thing to do with its meaning.

    The <!DOCTYPE> declaration is not case sensitive.
    Except when it is, such as on blazer or as a trigger for how Yandex processes pages.

    /FAIL/ before they even get out of their blasted "Introduction to HTML" and it goes downhill from there. They don't take the time to actually explain a damned thing, which is why the people who learn it from them don't know how to use ANYTHING properly!

    This entire page:
    https://www.w3schools.com/html/html_headings.asp

    Is reason enough not to even come close to trusting them for ANYTHING. But then, this entire framework:

    https://www.w3schools.com/w3css/

    Proves they have ZERO business teaching anyone how to build a website... Their mix of web rot, disinformation, misunderstanding -- mated to their sleazy practices and outright lies of the past should discount them from ever being pointed at for learning by anyone qualified to use any of these technologies. All any of their BS does is sucker nubes and rubes into thinking they have learned HTML, CSS, and other web technologies when they quite clearly have not.

    Much like Bootcrap, or react, or vue, the only thing you can learn from W3Fools is how NOT to use web technologies. They are sleazy duplicitous dirtbags preying on the ignorance of beginners. Nothing more, nothing less.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  10. #10
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,915
    Thanks
    36
    Thanked 1,058 Times in 1,054 Posts
    No wonder you like MDN as a starter site, you over explain things also. The above post is loaded with things that I don't know and haven't used. IMHO no one that hasn't made a site before should know that nor would knowing help them make their first site.

    My only prayer here is that you just stop bashing w3school every time someone suggests it. I don't jump up and down when someone says "Go to MDN". I just let it ride. Why can't you? Many people learned to code using W3 way before MDN was ever on the internet. I use both. Maybe most people do.

    OK. I'm done. I hope you figure out that the majority of people that come here for help are new to coding and are just making their own web site or coding for personal pleasure and don't care how Yandex processes page.

    Live and let live
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  11. #11
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,277
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by sunfighter View Post
    My only prayer here is that you just stop bashing w3school every time someone suggests it. I don't jump up and down when someone says "Go to MDN". I just let it ride. Why can't you?
    Well keep it up with the "thoughts and prayers", it'll be about that effective.

    The reason I can't let it ride is that it teaches people to do it WRONG. That it misleads, misinforms, and results in people having broken, incomplete, inaccessible pages with problems JUST LIKE this person's. It (along with trash like bootstrap) are why these people come to these forums with problems they wouldn't even have had in the first place if they took the time to understand things and didn't freak out "oh my goodness, there's so much text to read".

    But again, I have little tolerance for the "TLDR twitter generation" who lose their minds over anything longer than 288 characters.

    ... and it's not just about how yandex processes a page.

    It's about screen readers (software that reads pages aloud), braille readers, search engines, and every other potential UA type; the entire reason HTML was even flipping created! It's why using things like numbered headings just because you want "larger text" is nothing more than flipping the bird at accessibility, the intent and purpose of HTML, and telling large swaths of potential visitors to sod off.

    It's about keeping the code minimalist maintaining separation of presentation from content to leverage caching models, which is why saying things like "w3-red", "text-center", "text-muted", "box-shadow", or "col-s-4" is mentally enfeebled BS promoted by people unqualified to write a single blasted line of HTML or tell others how to do so.

    ... and it's about all these things that take these beginners and tell them to BOHICA. Screwing them over with ignorance and lies from day one!

    But Joe forbid anyone come right out and say that. No, let the world burn so long as nobody uses any harsh words.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •