Web Analytics Made Easy -
StatCounter Bootstrap HELP - 4 Objects in one ROW - CodingForum

Announcement

Collapse
No announcement yet.

Bootstrap HELP - 4 Objects in one ROW

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Bootstrap HELP - 4 Objects in one ROW

    Hello guys,

    I just need a little help how do i add one more object to the row ? I can't figure it out..

    Tryit Editor v3.1

    Thanks

  • #2
    What kind of layout do you want to achieve? Can't you just make them all col-sm-3 instead of col-sm-4 and paste fourth object?
    WordPress - so much more then editing themes

    Comment


    • #3
      change <div class="col-sm-4">

      to <div class="col-sm-3">
      Stop making things so hard on yourself.
      i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

      Comment


      • #4
        What they said...

        The bootstrap grid is 12 columns wide.

        Code:
          <div class="row">
            <div class="col-sm-3">
              <p class="text-center"><strong>Name</strong></p><br>
              <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
            </div>
            <div class="col-sm-3">
              <p class="text-center"><strong>Name</strong></p><br>
              <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
            </div>
            <div class="col-sm-3">
              <p class="text-center"><strong>Name</strong></p><br>
              <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
            </div>
            <div class="col-sm-3">
              <p class="text-center"><strong>Name</strong></p><br>
              <img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
            </div>
          </div>
        Last edited by benanamen; Oct 3, 2016, 03:03 PM.
        To save time, lets just assume I am almost never wrong.

        The XY Problem
        The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.

        Make A Donation https://www.paypal.me/KevinRubio

        Comment


        • #5
          Welcome to one of the dumber parts of bootcrap -- and why I usually tell people to find a stick to scrape it off with before tracking it all over the Internet's carpets. Between the grid nonsense and presentational use of classes, to add one more item you have to change the markup of the existing ones. To be frank that really puts the herp into the derp since the entire point of CSS is to NOT have to make changes to the markup just to add/remove items or adjust the style!

          Just like how it has you slopping out paragraphs on single words, strong tags on things that are likely NOT receiving "more emphasis", plopping "classes for nothing" in a presentational manner on pretty much everything... The end result being a bloated mess that would be less code and given you better control had just written it WITHOUT the framework in the first place!

          I mean, you basically have a list of choices here, with uniform data. That's easy.

          Code:
          <ul class="bandMembers">
          	<li>
          		Name
          		<img src="bandmember.jpg" alt="Random Name">
          	</li><li>
          		Name
          		<img src="bandmember.jpg" alt="Random Name">
          	</li><li>
          		Name
          		<img src="bandmember.jpg" alt="Random Name">
          	</li><li>
          		Name
          		<img src="bandmember.jpg" alt="Random Name">
          	</li>
          </ul>
          Gutting out all the rubbish that has no real business in your HTML if you care at all about accessibility or speed. Then for the style:

          Code:
          .bandMembers {
          	list-style:none;
          	text-align:center;
          	font-weight:bold;
          }
          
          .bandMembers li {
          	display:inline;
          	vertical-align:top;
          }
          
          .bandMembers a {
          	display:inline-block;
          	vertical-align:top;
          	width:25%;
          	min-width:212px;
          }
          
          .bandMembers img {
          	display:block;
          	padding-top:2em;
          	min-width:192px;
          	width:80%;
          	height:auto;
          	border:10px solid transparent;
          	opacity:0.7;
          	border-radius:50%;
          }
          
          .bandMembers a:active img,
          .bandMembers a:focus img,
          .bandMembers a:hover img {
          	border-color:#F1F1F1;
          	opacity:1;
          }
          Though you'd want to consider making your own media queries to adjust the LI width as the screen size diminishes.

          The laugh being the trade of 640 bytes of HTML and 246 bytes of CSS for 308 bytes of HTML and 525 bytes of CSS.

          Yeah that bootcrap is really saving you time and effort on site development alrighty. Really lives up to the propaganda and constant parroting of its praises right there.

          It makes you work harder, not smarter. You start out with more code, you'll end up writing more code, said code won't gracefully degrade properly, defeats the entire reason CSS is separate from HTML, and on the whole is why anyone telling you that it is "easier", "simpler" or "makes you more productive" are collectively talking out their arse; simply not knowing enough about HTML or CSS to be flapping their gums on the topic.
          Walk the dark path, sleep with angels, call the past for help.
          https://cutcodedown.com
          https://medium.com/@deathshadow

          Comment


          • #6
            The one thing I agree with deathshadow on (which is a rare thing) is a person should learn HTML/CSS before learning any other libraries and/or frameworks. I try not use any of them myself, but unfortunately when taking some college courses the instructors taught a framework or libraray for as deathshadow would say the instructors thought it was "easier". Trust me, it's harder to learn the vanilla when there's chocolate icing all over it. You'll be better off learning the foundation of HTML/CSS first and probably will never use a library or framework unless you are forced to in a job setting.
            Last edited by Strider64; Oct 5, 2016, 07:09 AM.
            "A person who never made a mistake never tried anything new." ~ Albert Einstein https://www.miniaturephotographer.com

            Comment


            • #7
              Originally posted by Strider64 View Post
              but unfortunately when taking some college courses the instructors
              Were basically talking out their backside and not qualified to flap their gums on the topic they were allegedly there to teach -- hence my painfully low opinion of most every career educator to be found in IT, and why IMHO a degree in computer sciences isn't worth a sheet of bog roll.

              Sadly, your typical "middle management" type who doesn't know the first thing about the topic only has degree or work history as a frame of reference; particularly since many of them are the "fail upwards" type; better at tonguing brown than they are at actually doing work.

              It is a rare treat indeed to come across anyone teaching HTML or CSS professionally that actually even knows the first blasted thing about HTML or CSS. Really kind of sad and pathetic state of affairs the way these leeches upon the teat of society just sleaze along on little to no REAL qualifications or understanding of the subject matter.
              Last edited by deathshadow; Oct 5, 2016, 10:02 AM.
              Walk the dark path, sleep with angels, call the past for help.
              https://cutcodedown.com
              https://medium.com/@deathshadow

              Comment

              Working...
              X