{
  "block": 71102509,
  "op": [
    "transfer",
    {
      "amount": "0.001 STEEM",
      "from": "steemegg",
      "memo": "Accumulate free upvotes on your posts every 6 hours! All you need to do is vote our witness account -> se-witness as one of your 30 witness votes. ->  See actual rewards not just 0.001 every day. https://steemlogin.com/sign/account-witness-vote?witness=se-witness&approve=1",
      "to": "codings"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-01-11T23:24:18",
  "trx_id": "853e69a6fadb645452f831b7caaad02690b85cfe",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 39613263,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @codings! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@codings/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@codings) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=codings)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "codings",
      "parent_permlink": "javascript-system-and-bootstrap",
      "permlink": "steemitboard-notify-codings-20200103t193405000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-01-03T19:34:06",
  "trx_id": "fd6ec799da363e9482eecba3e940342484376806",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 29140349,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @codings! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@codings/birthday1.png</td><td>1 Year on Steemit</td></tr></table>\n\n<sub>_[Click here to view your Board](https://steemitboard.com/@codings)_</sub>\n\n\n> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "codings",
      "parent_permlink": "javascript-system-and-bootstrap",
      "permlink": "steemitboard-notify-codings-20190103t194356000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-01-03T19:43:57",
  "trx_id": "129d2ec6bc3d3bd91c8b00a21be3daff07e831a4",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 20288788,
  "op": [
    "transfer",
    {
      "amount": "279.122 SBD",
      "from": "codings",
      "memo": "ec99f95474a3427ea9a",
      "to": "bittrex"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-03-01T08:08:24",
  "trx_id": "632892b55e129e07383f1d7a6c8f01e1971cde29",
  "trx_in_block": 14,
  "virtual_op": 0
}

{
  "block": 20288772,
  "op": [
    "claim_reward_balance",
    {
      "account": "codings",
      "reward_sbd": "3.163 SBD",
      "reward_steem": "0.000 STEEM",
      "reward_vests": "1571.724570 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-03-01T08:07:36",
  "trx_id": "aae1b96c16d8d0e45e01def718ffa5314d1e7e3f",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 20064756,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "sbd_payout": "3.163 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1571.724570 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-21T13:16:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 8
}

{
  "block": 20064756,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "javascript-system-and-bootstrap",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1046.453810 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-21T13:16:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 7
}

{
  "block": 19959508,
  "op": [
    "claim_reward_balance",
    {
      "account": "codings",
      "reward_sbd": "9.319 SBD",
      "reward_steem": "0.000 STEEM",
      "reward_vests": "4464.698028 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-17T21:32:09",
  "trx_id": "87b48b5806a93702c9d154805393f7ce5aadaa60",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 19954382,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "javascript-system-and-bootstrap",
      "permlink": "re-codings-javascript-system-and-bootstrap-20180217t171548994z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-17T17:15:48",
  "trx_id": "9bb9b5825d42b4aa6ee0ac658b47ef4dd9b3d92a",
  "trx_in_block": 26,
  "virtual_op": 0
}

{
  "block": 19954381,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "voter": "utopian-io",
      "weight": 107
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-17T17:15:45",
  "trx_id": "87337dec4b79687df4df2dbf686b8703309f467b",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 19952681,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "sbd_payout": "9.319 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "4464.698028 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-17T15:50:48",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 8
}

{
  "block": 19952681,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2974.421076 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-17T15:50:48",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 7
}

{
  "block": 19890269,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "voter": "kennethz",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-15T11:47:39",
  "trx_id": "1bcf0684287d58ccaf199572b6d472cd30041595",
  "trx_in_block": 37,
  "virtual_op": 0
}

{
  "block": 19881788,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "voter": "cifer",
      "weight": 8000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-15T04:43:24",
  "trx_id": "4e80d3bdebf6451fccd7d80d348a40eb9504084e",
  "trx_in_block": 13,
  "virtual_op": 0
}

{
  "block": 19881769,
  "op": [
    "comment",
    {
      "author": "manishmike10",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "javascript-system-and-bootstrap",
      "permlink": "re-codings-javascript-system-and-bootstrap-20180215t044226358z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-15T04:42:27",
  "trx_id": "8935c892634b80685df65640963bd64a9f0923b0",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 19881766,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- JAVASCRIPT SYSTEM AND BOOTSTRAP\n- MODAL.JS\n- DIMENSIONS OF OPENED MODAL BINDINGS\n- DROPDOWN.JS\n- SCROLLSPY.JS\n- TAB.JS\n- ADD TABLE ON PANEL BOX\n\n#### Requirements\nNotepad++\n\n#### Difficulty\n- Intermediate\n\n#### JAVASCRIPT SYSTEM AND BOOTSTRAP\n\nYou understand how we can make our web pages easier. We were able to create pages that fully compatible with browsers and mobile devices that bootstrap can offer both in elemental and structurally diverse ways. \nIn the topic we are currently discussing, we will discuss the JavaScript system that comes with Bootstrap. \nWith JavaScript, we can make many actions on our web page. If you do not have a lot of knowledge about JavaScript in particular, you can use Bootstrap's library to create pages faster. \nIn order to use the JavaScript library that comes with Bootstrap, we first need to include the JavaScript library code that we have already learned in my page.\n\nThe required codes are as follows: \n\n```\n<script src=\"//code.jquery.com/jquery-1.11.0.min.js\"></script>\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"></script>\n```\n\nYou can add the two pieces of code here between your <body> </ body> tags in your HTML page. In particular, one line remains at the end of the \"body\" tag, so if you add the </ body> tag on a line, it will be more successful. This insertion method is a mode of use supported by Bootstrap, which is thought to boot faster.\n\n#### MODAL.JS\n\nBootstrap has the JavaScript libraries it has brought with it and named itself. We will examine Modal.JS, the first sub-library under this heading. \nModal.JS is a sublibrary where we can easily do a lot of the basic things you want to do. When you use it, you can do it by assigning classes only on the HTML side without writing JavaScript code.\n\nThanks to Modal.JS, you can easily open another page when it is clicked on a button. In addition, this is a process that can be turned off instantly, that is, the page to be opened is hidden in the button. No redirection to the additional page. \nOur code for using the example Modal.JS is as follows:\n\n\n```\n<button class=\"btn btn-danger btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\">\n    Modal.JS Examples\n</button>\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                <h4 class=\"modal-title\" id=\"myModalLabel\">Modal.JS Examples</h4>\n            </div>\n            <div class=\"modal-body\">\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente doloremque quo vitae ratione voluptatibus quas quod amet, velit neque vero quam adipisci aut facere sunt saepe a, iure, consequatur illum.\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger btn-sm\" data-dismiss=\"modal\">Close</button>\n                <button type=\"button\" class=\"btn btn-warning btn-sm\">Accept</button>\n            </div>\n        </div>\n    </div>\n</div>\n```\n\nWe did our operations using classes as shown in our code.\n\nModal.JS example of our output: \n\n![Boot1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png)\n\nAs you can see in the picture, only one button is displayed at the moment. But when we click on it, you will get a different box. \n\n![Boot2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png)\n\nNow, as you can see in the picture, when we clicked on the buton now, we came across a different box. We created this box with the codes that I gave earlier.\n \nHowever, when we click on this box, it becomes active.At the same time you can easily switch off using the cross icon or the \"Close\" button. Also, when this box comes in, the background is covered with a gray color, on which only the box is focused.\n\nThe full view of our box is as follows: \n\n![Boot3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png)\n\nIt is opened to the page of our canvas exactly as it appears in the picture. \n\n#### DIMENSIONS OF OPENED MODAL BINDINGS\nwe will click on the button and we will learn how to change the dimensions of the opposing modal boxes under this heading . \nThe default size is not suitable for everyone, so we will resize it with a very easy operation.\nOur required codes are as follows:\n\n```\n<button class=\"btn btn-warning btn-lg\" data-toggle=\"modal\" data-target=\".bs-example-modal-lg\">Large Modal Button</button>\n<div class=\"modal fade bs-example-modal-lg\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ducimus, aut fugiat nemo quas hic perferendis commodi nihil deleniti sed, distinctio odio dolores suscipit, doloribus facilis tenetur cupiditate atque ad!\n        </div>\n    </div>\n</div>\n\n<button class=\"btn btn-warning btn-lg\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\">Small Modal Button</button>\n<div class=\"modal fade bs-example-modal-sm\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-sm\">\n        <div class=\"modal-content\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae qui animi sunt, esse sit praesentium vitae possimus consequuntur, iste voluptas, accusamus, ab obcaecati maxime quam natus eveniet sed reiciendis ullam!\n        </div>\n    </div>\n</div>\n```\n\nAs you can see from the areas I have highlighted, there are \"sm\" and \"lg\" structures we have used in many places. We have easily resized using these constructions. \n\nThe outputs will be as follows: \n\n![Boot4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png)\n\nIt is a modal box with the size of \"Large\" in the picture. \nIf it is a small size box, the output will be as follows: \n\n![Boot5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png)\n\nAs you can see, our cannon was both in appearance and structurally shrunk. \nThese boxes open with a small and pleasant effect when opened. If this effect is not suitable for you, you can easily turn off the effect with the code below. \n\n```\n<div class=\"modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"\" aria-hidden=\"true\">..................</div>\n```\n\nAs you can see, here is my div ethics. You can prevent the box from being inserted between these codes and opening the effect. All we have to do is to refer to this div tag when we write the codes.\nYou can also use other JavaScript code located on the Bootstrap page if you want to do more. I do not want to enter these additional functions because it appeals to more specialized users, otherwise you will have a lot of confusion with your JavaScript.\nYou can build more functional libraries by reviewing all the Events and Methods code on Bootstrap's own page.\n\n![Boot6.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png)\n\nAs you can see in the picture, Bootstrap gives you other methods that you can implement, as well as a page in Events like this.\n\n![Boot7.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png)\n\nThe part that appears in the picture is the Events section mentioned in the title. \n\n#### DROPDOWN.JS\nThis JS library has been developed to make popup menus understandable by name. With Dropdown.JS, you can easily create pop-up menus in navigation and pill menus.\nWe have already seen the drop-down menu in detail on other pages. So I decided to explain just the same thing again in this section. You can obtain the necessary information for this section from other pages.\nWe talked about how to make a drop-down menu when we are talking about navigation menus. But here I would like to give the table for the extra Events and Methods events that Bootstrap has done.\n\n![Boot8.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png)\n\nWith this extra table you can apply more options. \n#### SCROLLSPY.JS\n\nUnder this heading we will examine the ScrollSpy.JS library which comes with Bootstrap. We can describe this library with the best pictures because it gives us a lot of respect in terms of user experience compared to other sites. \nWith this library you can switch between menus in the navigation menu. As already understood from its name, the Scroll term is due to this feature. \nNow let's look at how we can use it. Our sample code for use is as follows: \n\n```\n<div class=\"container-fluid\" style=\"width: 700px;\">\n<nav id=\"navbar-example\" class=\"navbar navbar-default navbar-inverse\" role=\"navigation\">\n    <div class=\"navbar-header\">\n        <button class=\"navbar-toggle\" data-toggle=\"collapse\" type=\"button\" data-target=\".bs-js-navbar-scrollspy\">\n            <span class=\"icon-bar\"></span>\n            <span class=\"icon-bar\"></span>\n            <span class=\"icon-bar\"></span>\n        </button>\n        <a class=\"navbar-brand\" href=\"#\">ScrollSpy.JS Example</a>\n    </div>\n    <div class=\"collapse navbar-collapse bs-js-navbar-scrollspy\">\n        <ul class=\"nav navbar-nav\">\n            <li><a href=\"#lorem\">1. Step</a></li>\n            <li><a href=\"#ipsum\">2. Step</a></li>\n            <ul class=\"dropdown-menu\" role=\"menu\"></ul>\n            </li>\n        </ul>\n    </div>\n</nav>\n\n<div data-spy=\"scroll\" data-target=\"#navbar-example\" data-offset=\"0\" style=\"height:200px;overflow:auto; position: relative;\">\n    <h4 id=\"lorem\">Lorem</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem illo esse consequuntur, ducimus praesentium quisquam, quae veritatis. Sint ex molestiae, consectetur, quibusdam doloremque, fugit est, omnis magnam doloribus qui vel!</p>\n\n    <h4 id=\"ipsum\">Ipsum</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime numquam assumenda maiores dolorem nobis similique aperiam! Architecto asperiores obcaecati quisquam, recusandae assumenda odio dolorem explicabo aspernatur velit hic ab adipisci?</p>\n\n    <h4 id=\"sit\">Sit</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta non quod explicabo blanditiis esse doloribus, vero id in laboriosam, nesciunt, ratione quibusdam minus incidunt placeat velit quis suscipit tempore rem.</p>\n\n    <h4 id=\"dolor\">Dolor</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate consequuntur incidunt nemo architecto aliquam esse vel blanditiis necessitatibus libero explicabo, dolorum nam totam voluptatem sapiente voluptatum. Alias debitis doloremque numquam.</p>\n\n    <h4 id=\"amet\">Amet</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis mollitia id libero, molestias exercitationem ipsa aspernatur harum eius laudantium? Eius quae nobis, ut esse, voluptas minima rem debitis recusandae itaque.</p>\n</div>\n```\n\nOur codes are really long, as you can see, but there is not much that can be done in this matter. If we were going to examine our code, we used our classes and codes like datatoggle in many lines. A separate point to note in this section is to write the codes correctly. Because there is a lot of code. Letter mistakes may prevent you from working. \nHere is a code that we need to add to the <body> tag, except for those codes. Adding this code is an important issue. \n\n```\n<body style=\"position: relative; padding:30px;\" data-spy=\"scroll\" data-target=\".navbar-example\">\n```\n\nAs you can see, we made extra attachments to the body tag. Thanks to these additives, it will work more smoothly. Of course, the most important thing is that JavaScript files are included in the project. Otherwise, no action will be taken.\nYes, now what kind of output does it see.\n\n![Boot9.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png)\n\nThere is a field in the picture with an arrow mark. This area is our scrollbar area and we are doing the sliding process through this area. If you want to scroll with the bar you can do with the help of the mouse. As you can see, we have more of our scripts, so the scrollbar looks full. When we go down to this section, the navigation menu automatically switches itself to the second part. In this way, the user can understand which part he is in. \n\n![Boot10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png)\n\nAs you can see in the picture, when we make a downward stroke, the 2nd section of the navigation menu is set. So now our upper part is completely based on the scroll process. Especially here I made the navigation bar inverse so that it can be understood better by making it black. \nIn short, the event I would like to describe is as follows: \n\n![Boot11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png)\n\nAs you can see in the picture, we added our codes on a line. \n\n#### TAB.JS\n\nUnder this heading we will learn how to work with tabbed structures with tabstrips using Bootstrap and Tab.JS. \nTab.JS is a library made for the tab system as understood. With this system, you can work as you would in a scanner. When we associate Tab.JS library with the real time, it works on the same system as browsers and you can use it easily because it came directly with Bootstrap. \nThe code for our sample Tab.JS is as follows: \n\n```\n<div class=\"bs-example bs-example-tabs\">\n\n    <ul id=\"myTab\" class=\"nav nav-tabs\" role=\"tablist\">\n        <li class=\"active\"><a href=\"#first\" role=\"tab\" data-toggle=\"tab\">1. Step</a></li>\n        <li class=\"\"><a href=\"#second\" role=\"tab\" data-toggle=\"tab\">2. Step</a></li>\n        <li class=\"\"><a href=\"#third\" role=\"tab\" data-toggle=\"tab\">3. Step</a></li>\n    </ul>\n\n    <div id=\"myTabContent\" class=\"tab-content\">\n\n        <div class=\"tab-pane fade active in\" id=\"first\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat iusto placeat temporibus optio necessitatibus consequatur ex qui, amet laudantium, maiores nobis eligendi aliquid, soluta enim! Possimus ipsam dolor, voluptatem dolorem.</p>\n        </div>\n\n        <div class=\"tab-pane fade\" id=\"second\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae excepturi, consectetur rem deserunt cumque. Quas accusantium ex nemo alias repellendus dolorem corporis asperiores sequi maiores quam eligendi, atque, dicta maxime.</p>\n        </div>\n\n        <div class=\"tab-pane fade\" id=\"third\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo laborum, suscipit. Omnis id temporibus ducimus odio a, atque saepe cupiditate adipisci aspernatur pariatur eos rem autem dolor dignissimos minus, reprehenderit.</p>\n        </div>\n\n    </div>\n\n</div>\n```\n\nAs you can see, we are faced with long lines again, but I can say that it is easier to use Tab.JS. The point to note here is that the value in the href and the value in the id are the same, as seen in places where I have emphasized. If it is the same, it will not be a problem. \nOur output will be as follows: \n\n![Boot12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png)\n\nThe picture reminds us of web browsers. That's why it's called tab anyway. Here we see the tab system in Web browsers. You can add as many tabs as you like.\nAs you can see in our example, there are three parts, you can easily switch between them by clicking on these parts.\n\n![Boot13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png)\n\nIf you look carefully at the remainder, we have shifted to the third part. However, our text content has changed. \nWe also have a term called \"Fade Active In\" in our codes. This term applies an effect called \"Fade\" when switching between the tabs. If you want to remove this effect, it will be enough to delete the code. \nYou can also browse the Bootstrap web page if you want to work more with the JavaScript side. As I said, you can look at other methods if your JavaScript knowledge is advanced. \n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/javascript-system-and-bootstrap\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png\"],\"moderator\":{\"account\":\"manishmike10\",\"time\":\"2018-02-15T04:42:18.113Z\",\"reviewed\":true,\"pending\":false,\"flagged\":false},\"questions\":[],\"score\":0}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "javascript-system-and-bootstrap",
      "title": "Javascript System and Bootstrap"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-15T04:42:18",
  "trx_id": "20050fd75cea878ea2c22fc4c32dad47490c3415",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 19863687,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "voter": "luigi-tecnologo",
      "weight": 400
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T13:37:09",
  "trx_id": "624f22aebcb2f87ef90111fead8a940bf3e9cde2",
  "trx_in_block": 51,
  "virtual_op": 0
}

{
  "block": 19863641,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "javascript-system-and-bootstrap",
      "voter": "team",
      "weight": 1000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T13:34:51",
  "trx_id": "391d38ac376e8afbedc92a757c29e46da1d6ab50",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 19863266,
  "op": [
    "comment_options",
    {
      "allow_curation_rewards": true,
      "allow_votes": true,
      "author": "codings",
      "extensions": [
        [
          0,
          {
            "beneficiaries": [
              {
                "account": "utopian.pay",
                "weight": 2500
              }
            ]
          }
        ]
      ],
      "max_accepted_payout": "1000000.000 SBD",
      "percent_steem_dollars": 10000,
      "permlink": "javascript-system-and-bootstrap"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T13:16:06",
  "trx_id": "6513eb6345af3c2f78af966a09d6aac31af83d14",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 19863266,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- JAVASCRIPT SYSTEM AND BOOTSTRAP\n- MODAL.JS\n- DIMENSIONS OF OPENED MODAL BINDINGS\n- DROPDOWN.JS\n- SCROLLSPY.JS\n- TAB.JS\n- ADD TABLE ON PANEL BOX\n\n#### Requirements\nNotepad++\n\n#### Difficulty\n- Intermediate\n\n#### JAVASCRIPT SYSTEM AND BOOTSTRAP\n\nYou understand how we can make our web pages easier. We were able to create pages that fully compatible with browsers and mobile devices that bootstrap can offer both in elemental and structurally diverse ways. \nIn the topic we are currently discussing, we will discuss the JavaScript system that comes with Bootstrap. \nWith JavaScript, we can make many actions on our web page. If you do not have a lot of knowledge about JavaScript in particular, you can use Bootstrap's library to create pages faster. \nIn order to use the JavaScript library that comes with Bootstrap, we first need to include the JavaScript library code that we have already learned in my page.\n\nThe required codes are as follows: \n\n```\n<script src=\"//code.jquery.com/jquery-1.11.0.min.js\"></script>\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"></script>\n```\n\nYou can add the two pieces of code here between your <body> </ body> tags in your HTML page. In particular, one line remains at the end of the \"body\" tag, so if you add the </ body> tag on a line, it will be more successful. This insertion method is a mode of use supported by Bootstrap, which is thought to boot faster.\n\n#### MODAL.JS\n\nBootstrap has the JavaScript libraries it has brought with it and named itself. We will examine Modal.JS, the first sub-library under this heading. \nModal.JS is a sublibrary where we can easily do a lot of the basic things you want to do. When you use it, you can do it by assigning classes only on the HTML side without writing JavaScript code.\n\nThanks to Modal.JS, you can easily open another page when it is clicked on a button. In addition, this is a process that can be turned off instantly, that is, the page to be opened is hidden in the button. No redirection to the additional page. \nOur code for using the example Modal.JS is as follows:\n\n\n```\n<button class=\"btn btn-danger btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\">\n    Modal.JS Examples\n</button>\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                <h4 class=\"modal-title\" id=\"myModalLabel\">Modal.JS Examples</h4>\n            </div>\n            <div class=\"modal-body\">\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente doloremque quo vitae ratione voluptatibus quas quod amet, velit neque vero quam adipisci aut facere sunt saepe a, iure, consequatur illum.\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger btn-sm\" data-dismiss=\"modal\">Close</button>\n                <button type=\"button\" class=\"btn btn-warning btn-sm\">Accept</button>\n            </div>\n        </div>\n    </div>\n</div>\n```\n\nWe did our operations using classes as shown in our code.\n\nModal.JS example of our output: \n\n![Boot1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png)\n\nAs you can see in the picture, only one button is displayed at the moment. But when we click on it, you will get a different box. \n\n![Boot2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png)\n\nNow, as you can see in the picture, when we clicked on the buton now, we came across a different box. We created this box with the codes that I gave earlier.\n \nHowever, when we click on this box, it becomes active.At the same time you can easily switch off using the cross icon or the \"Close\" button. Also, when this box comes in, the background is covered with a gray color, on which only the box is focused.\n\nThe full view of our box is as follows: \n\n![Boot3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png)\n\nIt is opened to the page of our canvas exactly as it appears in the picture. \n\n#### DIMENSIONS OF OPENED MODAL BINDINGS\nwe will click on the button and we will learn how to change the dimensions of the opposing modal boxes under this heading . \nThe default size is not suitable for everyone, so we will resize it with a very easy operation.\nOur required codes are as follows:\n\n```\n<button class=\"btn btn-warning btn-lg\" data-toggle=\"modal\" data-target=\".bs-example-modal-lg\">Large Modal Button</button>\n<div class=\"modal fade bs-example-modal-lg\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ducimus, aut fugiat nemo quas hic perferendis commodi nihil deleniti sed, distinctio odio dolores suscipit, doloribus facilis tenetur cupiditate atque ad!\n        </div>\n    </div>\n</div>\n\n<button class=\"btn btn-warning btn-lg\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\">Small Modal Button</button>\n<div class=\"modal fade bs-example-modal-sm\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-sm\">\n        <div class=\"modal-content\">\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae qui animi sunt, esse sit praesentium vitae possimus consequuntur, iste voluptas, accusamus, ab obcaecati maxime quam natus eveniet sed reiciendis ullam!\n        </div>\n    </div>\n</div>\n```\n\nAs you can see from the areas I have highlighted, there are \"sm\" and \"lg\" structures we have used in many places. We have easily resized using these constructions. \n\nThe outputs will be as follows: \n\n![Boot4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png)\n\nIt is a modal box with the size of \"Large\" in the picture. \nIf it is a small size box, the output will be as follows: \n\n![Boot5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png)\n\nAs you can see, our cannon was both in appearance and structurally shrunk. \nThese boxes open with a small and pleasant effect when opened. If this effect is not suitable for you, you can easily turn off the effect with the code below. \n\n```\n<div class=\"modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"\" aria-hidden=\"true\">..................</div>\n```\n\nAs you can see, here is my div ethics. You can prevent the box from being inserted between these codes and opening the effect. All we have to do is to refer to this div tag when we write the codes.\nYou can also use other JavaScript code located on the Bootstrap page if you want to do more. I do not want to enter these additional functions because it appeals to more specialized users, otherwise you will have a lot of confusion with your JavaScript.\nYou can build more functional libraries by reviewing all the Events and Methods code on Bootstrap's own page.\n\n![Boot6.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png)\n\nAs you can see in the picture, Bootstrap gives you other methods that you can implement, as well as a page in Events like this.\n\n![Boot7.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png)\n\nThe part that appears in the picture is the Events section mentioned in the title. \n\n#### DROPDOWN.JS\nThis JS library has been developed to make popup menus understandable by name. With Dropdown.JS, you can easily create pop-up menus in navigation and pill menus.\nWe have already seen the drop-down menu in detail on other pages. So I decided to explain just the same thing again in this section. You can obtain the necessary information for this section from other pages.\nWe talked about how to make a drop-down menu when we are talking about navigation menus. But here I would like to give the table for the extra Events and Methods events that Bootstrap has done.\n\n![Boot8.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png)\n\nWith this extra table you can apply more options. \n#### SCROLLSPY.JS\n\nUnder this heading we will examine the ScrollSpy.JS library which comes with Bootstrap. We can describe this library with the best pictures because it gives us a lot of respect in terms of user experience compared to other sites. \nWith this library you can switch between menus in the navigation menu. As already understood from its name, the Scroll term is due to this feature. \nNow let's look at how we can use it. Our sample code for use is as follows: \n\n```\n<div class=\"container-fluid\" style=\"width: 700px;\">\n<nav id=\"navbar-example\" class=\"navbar navbar-default navbar-inverse\" role=\"navigation\">\n    <div class=\"navbar-header\">\n        <button class=\"navbar-toggle\" data-toggle=\"collapse\" type=\"button\" data-target=\".bs-js-navbar-scrollspy\">\n            <span class=\"icon-bar\"></span>\n            <span class=\"icon-bar\"></span>\n            <span class=\"icon-bar\"></span>\n        </button>\n        <a class=\"navbar-brand\" href=\"#\">ScrollSpy.JS Example</a>\n    </div>\n    <div class=\"collapse navbar-collapse bs-js-navbar-scrollspy\">\n        <ul class=\"nav navbar-nav\">\n            <li><a href=\"#lorem\">1. Step</a></li>\n            <li><a href=\"#ipsum\">2. Step</a></li>\n            <ul class=\"dropdown-menu\" role=\"menu\"></ul>\n            </li>\n        </ul>\n    </div>\n</nav>\n\n<div data-spy=\"scroll\" data-target=\"#navbar-example\" data-offset=\"0\" style=\"height:200px;overflow:auto; position: relative;\">\n    <h4 id=\"lorem\">Lorem</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem illo esse consequuntur, ducimus praesentium quisquam, quae veritatis. Sint ex molestiae, consectetur, quibusdam doloremque, fugit est, omnis magnam doloribus qui vel!</p>\n\n    <h4 id=\"ipsum\">Ipsum</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime numquam assumenda maiores dolorem nobis similique aperiam! Architecto asperiores obcaecati quisquam, recusandae assumenda odio dolorem explicabo aspernatur velit hic ab adipisci?</p>\n\n    <h4 id=\"sit\">Sit</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta non quod explicabo blanditiis esse doloribus, vero id in laboriosam, nesciunt, ratione quibusdam minus incidunt placeat velit quis suscipit tempore rem.</p>\n\n    <h4 id=\"dolor\">Dolor</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate consequuntur incidunt nemo architecto aliquam esse vel blanditiis necessitatibus libero explicabo, dolorum nam totam voluptatem sapiente voluptatum. Alias debitis doloremque numquam.</p>\n\n    <h4 id=\"amet\">Amet</h4>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis mollitia id libero, molestias exercitationem ipsa aspernatur harum eius laudantium? Eius quae nobis, ut esse, voluptas minima rem debitis recusandae itaque.</p>\n</div>\n```\n\nOur codes are really long, as you can see, but there is not much that can be done in this matter. If we were going to examine our code, we used our classes and codes like datatoggle in many lines. A separate point to note in this section is to write the codes correctly. Because there is a lot of code. Letter mistakes may prevent you from working. \nHere is a code that we need to add to the <body> tag, except for those codes. Adding this code is an important issue. \n\n```\n<body style=\"position: relative; padding:30px;\" data-spy=\"scroll\" data-target=\".navbar-example\">\n```\n\nAs you can see, we made extra attachments to the body tag. Thanks to these additives, it will work more smoothly. Of course, the most important thing is that JavaScript files are included in the project. Otherwise, no action will be taken.\nYes, now what kind of output does it see.\n\n![Boot9.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png)\n\nThere is a field in the picture with an arrow mark. This area is our scrollbar area and we are doing the sliding process through this area. If you want to scroll with the bar you can do with the help of the mouse. As you can see, we have more of our scripts, so the scrollbar looks full. When we go down to this section, the navigation menu automatically switches itself to the second part. In this way, the user can understand which part he is in. \n\n![Boot10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png)\n\nAs you can see in the picture, when we make a downward stroke, the 2nd section of the navigation menu is set. So now our upper part is completely based on the scroll process. Especially here I made the navigation bar inverse so that it can be understood better by making it black. \nIn short, the event I would like to describe is as follows: \n\n![Boot11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png)\n\nAs you can see in the picture, we added our codes on a line. \n\n#### TAB.JS\n\nUnder this heading we will learn how to work with tabbed structures with tabstrips using Bootstrap and Tab.JS. \nTab.JS is a library made for the tab system as understood. With this system, you can work as you would in a scanner. When we associate Tab.JS library with the real time, it works on the same system as browsers and you can use it easily because it came directly with Bootstrap. \nThe code for our sample Tab.JS is as follows: \n\n```\n<div class=\"bs-example bs-example-tabs\">\n\n    <ul id=\"myTab\" class=\"nav nav-tabs\" role=\"tablist\">\n        <li class=\"active\"><a href=\"#first\" role=\"tab\" data-toggle=\"tab\">1. Step</a></li>\n        <li class=\"\"><a href=\"#second\" role=\"tab\" data-toggle=\"tab\">2. Step</a></li>\n        <li class=\"\"><a href=\"#third\" role=\"tab\" data-toggle=\"tab\">3. Step</a></li>\n    </ul>\n\n    <div id=\"myTabContent\" class=\"tab-content\">\n\n        <div class=\"tab-pane fade active in\" id=\"first\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat iusto placeat temporibus optio necessitatibus consequatur ex qui, amet laudantium, maiores nobis eligendi aliquid, soluta enim! Possimus ipsam dolor, voluptatem dolorem.</p>\n        </div>\n\n        <div class=\"tab-pane fade\" id=\"second\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae excepturi, consectetur rem deserunt cumque. Quas accusantium ex nemo alias repellendus dolorem corporis asperiores sequi maiores quam eligendi, atque, dicta maxime.</p>\n        </div>\n\n        <div class=\"tab-pane fade\" id=\"third\">\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo laborum, suscipit. Omnis id temporibus ducimus odio a, atque saepe cupiditate adipisci aspernatur pariatur eos rem autem dolor dignissimos minus, reprehenderit.</p>\n        </div>\n\n    </div>\n\n</div>\n```\n\nAs you can see, we are faced with long lines again, but I can say that it is easier to use Tab.JS. The point to note here is that the value in the href and the value in the id are the same, as seen in places where I have emphasized. If it is the same, it will not be a problem. \nOur output will be as follows: \n\n![Boot12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png)\n\nThe picture reminds us of web browsers. That's why it's called tab anyway. Here we see the tab system in Web browsers. You can add as many tabs as you like.\nAs you can see in our example, there are three parts, you can easily switch between them by clicking on these parts.\n\n![Boot13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png)\n\nIf you look carefully at the remainder, we have shifted to the third part. However, our text content has changed. \nWe also have a term called \"Fade Active In\" in our codes. This term applies an effect called \"Fade\" when switching between the tabs. If you want to remove this effect, it will be enough to delete the code. \nYou can also browse the Bootstrap web page if you want to work more with the JavaScript side. As I said, you can look at other methods if your JavaScript knowledge is advanced. \n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/javascript-system-and-bootstrap\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613784/xhzaxx7mc4zpx6v1yj1b.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613791/rim1zn0hwvtpz82ujckd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613798/vpxza4enrxllvku8y4cl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613810/k76o4ozpr2pdyixtsuof.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613817/suaor7tv3wubx9nrczoe.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613827/bvwlhpuiimqtnrqtedoh.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613834/i7iofoquvgog57t7lzqb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613846/orjliliapuckjep0yy1n.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613857/hca9hlteeougdrxcupgn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613865/u3qwe1a1jrwecxvp3s5t.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613873/gyc9r7wjenfpm3ajocs7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613884/xwqelby2bbyocfkqwpdz.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518613890/bcrq7iuqqz2dlhsuaa9f.png\"]}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "javascript-system-and-bootstrap",
      "title": "Javascript System and Bootstrap"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T13:16:06",
  "trx_id": "6513eb6345af3c2f78af966a09d6aac31af83d14",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 19862822,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "permlink": "re-codings-bootstrap-clear-fix-show-and-hidden-text-hidden-commands-20180214t125354699z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T12:53:54",
  "trx_id": "fd09592f551297b2d63100bd34bcd4e451c3bc7b",
  "trx_in_block": 35,
  "virtual_op": 0
}

{
  "block": 19862821,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "voter": "utopian-io",
      "weight": 323
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T12:53:51",
  "trx_id": "74a2c82adcdae58fa7427374634eb029985f3cd9",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 19846915,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "voter": "greenrun",
      "weight": 3300
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T23:37:18",
  "trx_id": "c5ac50ca1d2fe9d7b0d54931386a7c6849ca960b",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 19833773,
  "op": [
    "comment",
    {
      "author": "sedatyildiz",
      "body": "Your contribution cannot be approved because it does not follow the [Utopian Rules](https://utopian.io/rules).\n- You have republished content that already exists on the Internet. <a href=\"https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp\">Here</a> and <a href=\"https://www.w3schools.com/bootstrap/bootstrap_panels.asp\">Here</a>.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels",
      "permlink": "re-codings-bootstrap-panels-two-layers-three-layers-colorful-layers-panels-20180213t123929691z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T12:39:30",
  "trx_id": "fd068f93000c9666ae641008703ad7fe51cdb992",
  "trx_in_block": 35,
  "virtual_op": 0
}

{
  "block": 19833748,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- PANELS\n- DEFAULT PANEL\n- TWO LAYERS PANEL\n- THREE LAYERS PANEL\n- COLERFUL PANEL\n- ADD GROUP BOX IN PANEL BOX\n- ADD TABLE ON PANEL BOX\n\n\n#### Requirements\nNotepad++\n\n#### Difficulty\n- Intermediate\n\n\n### PANELS\nUnder this header we going to touch on panel box which be came with Bootstrap.\n\n### DEFAULT PANEL\nThis part we going to see how to use default panel wihch be came with Bootstrap.\nVarsayılan panel adından anlaşılacağı üzere en temel ve basit amaç için yapılmış paneldir.\nDefault panel is  most primary panel to use basic  logic.\nFor example to use necessary code on below:\n\n```\n<div class=\"panel panel-default\">\n\t<div class=\"panel-body\">\n\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit sit facilis hic nostrum illum eius iste obcaecati alias at aliquid voluptates cupiditate, consequuntur, laborum magnam, et, id vel blanditiis natus.\n\t</div>\n</div>\n```\n\nAs we can see highlighted part  we make a panel box with use \"div\" tag. Than for main part we create an other \"div\" tag to make body part, than we put on example text under the post tag.\nPanel will be like on bellow:\n\n![Bootstrap73.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png)\n\nAss we can see panel has been created succesful\n\n### TWO LAYERS PANEL\nUnder this header  we going to see how to create panel with two layers.\nWith two layers panel we can create top and middle side different than each other.  We can imagine this is like \"header\" and \"body\" logic.\nFor example to use this necessary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">Hello</div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorem, ullam minus possimus maiores molestias deleniti dignissimos repudiandae beatae quas est tempora eligendi nam tempore alias consequatur commodi necessitatibus illum.\n    </div>\n</div>\n\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">World</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n</div>\n```\nA highlighted place as we can see to create top line we wrote panel and heading.\nThe code should be give ressult like on bellow:\n\n![Bootstrap63.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png)\n\nAs we can see on picture now Boxes are created by two layers. With this technical we can give the box header by easly\n\n### THREE LAYERS PANEL\nPrevious header we learn, how to use panel by two layers. And now we going to learn how to do this by three layers.\n\nActualy Three layers panels are using by to make useful boxes.With this style we can made a panel with  Header,content and footer part much better.\nFor example to use necassary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">Hello World!</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n    <div class=\"panel-footer\">\n        All rights reserved.\n    </div>\n</div>\n```\n\nAs you can see three highlighted part. Respectively first we create heading than body than footer.\nThree layers  panel look like should be on bellow:\n\n![Bootstrap64.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png)\n\nAs we can see on picture panel has been created by three layers. Also  footer and heading is look much evident.\n\n### COLERFUL PANEL\nUnder this header we going to learn. How to colorize panel by before lesson what we learn with coler code.\nWhen we use this technic we have to change default code in \"div\" tag\nExample to use this necassary code on bellow:\n\n```\n<div class=\"panel panel-danger\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">Hello World!</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n</div>\n```\n\nAs we can see the part of highlighted in place of default we wrote danger in this way we got show on screen by red. And also we can use danger code which part is most important. \nWith this code we will see result as bellow:\n\n![Bootstrap65.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png)\n\n\nNow default grey panel changed by red color. Also we can use all panel code, what we learn in other lesson.\n\n### ADD GROUP BOX IN PANEL BOX\nUnder this header we going to do put box inside box. It is means we going to do separate inside the panel with group box.\nWith this technic we can put  inside panel box , different group box. Let me explain with example.\nExample to use this necassary code on bellow:\n\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">Hello World</div>\n    <div class=\"panel-body\">\n        <p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione temporibus accusamus eveniet quo non nulla corporis ex assumenda odit iusto atque vel totam, modi dignissimos laudantium inventore. Omnis, corporis voluptatibus.</p>\n    </div>\n    <ul class=\"list-group\">\n        <li class=\"list-group-item\">Go to school.</li>\n        <li class=\"list-group-item\">Go home.</li>\n        <li class=\"list-group-item\">Cook.</li>\n        <li class=\"list-group-item\">Enter the Internet.</li>\n    </ul>\n</div>\n```\n\nAs we can see on highlighted part before than finish \"div\" tag we put \"ul\" and add our data by \"li\" tag li means list.\nThe code sems to be on bellow:\n\n![Bootstrap66.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png)\n\nAs we can see on picture now we use two different structure in same time. Like this multiple use we can create  a lot  interactive structure.\n\n### ADD TABLE ON PANEL BOX\nUnder this header we going to see how to add table on panel box.\nPrevious lessons we learn on table part all detail of table formats. If we know table features we'll not diffuculty.\nExample to use this necassary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-body\">\n        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ipsa quo iste iure corrupti reiciendis voluptatibus dolores rerum maxime, qui esse odio at quasi quam, non excepturi dolorem, voluptate perferendis!</p>\n    </div>\n    <table class=\"table\">\n        <thead>\n            <tr>\n                <th>//</th>\n                <th>Education status</th>\n                <th>City</th>\n                <th>Mail</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>University</td>\n                <td>New York</td>\n                <td>[email protected]</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Master</td>\n                <td>Boston</td>\n                <td>[email protected]</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>High school</td>\n                <td>New York</td>\n                <td>[email protected]</td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n```\n\nAs you can see highlighted part, we apply  usage style of other part. To do this we add table tag before than close \"div\" tag.\nwith this code we will see result as bellow\n\n![Bootstrap67.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png)\n\nAs it seems we use panel element and table element together. It means we use multiple use. I just use standart table on this part if you wish you can use all table  features which you wish.\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-panels-two-layers-three-layers-colorful-layers-panels\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"users\":[\"abc.com\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png\"],\"moderator\":{\"account\":\"sedatyildiz\",\"time\":\"2018-02-13T12:38:14.665Z\",\"flagged\":true,\"reviewed\":false,\"pending\":false}}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels",
      "title": "Bootstrap Panels, Two Layers, Three Layers, Colorful Layers Panels"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T12:38:15",
  "trx_id": "518af894f2b7db29791b933bb050a569f5e3a9bf",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 19833170,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "voter": "cifer",
      "weight": 8000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T12:09:21",
  "trx_id": "1da00ee1e83a808bfad8ea364d50d75f7ae449d6",
  "trx_in_block": 24,
  "virtual_op": 0
}

{
  "block": 19833149,
  "op": [
    "comment",
    {
      "author": "creon",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "permlink": "re-codings-bootstrap-clear-fix-show-and-hidden-text-hidden-commands-20180213t120819771z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T12:08:18",
  "trx_id": "0d1ecadc54a2812b8e7ad14ef75df965dfac781c",
  "trx_in_block": 40,
  "virtual_op": 0
}

{
  "block": 19833143,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- CLEAR FIX COMMAND\n- SHOW & HIDDEN COMMAND\n- TEXT HIDDEN COMAND\n- RESPONSIVE SENSITIVE VIDEO BOX\n- WELL ELEMENT\n\n#### Requirements\n- Notepad++\n\n#### Difficulty\n- Intermediate\n\n\n\n### CLEAR FIX COMMAND\nAn other code command is \"Clearfix\" with this command you can do \"Fix\" by easily after to Float.\nYou can see nessecary code to do this stage below:\n\n```\n<div class=\"clearfix\">Hello World</div>\n```\n\n### SHOW & HIDDEN COMMAND\n\nThese two code you can hide element and show element when you want.\nYou can see a example to use code  below:\n\n```\n<div class=\"show\">\n    <p class=\"lead\">Show</p>\n</div>\n\n<div class=\"hidden\">\n    <p class=\"lead\">Hidden</p>\n</div>\n```\n\nThis stage we just make a \"div\" tag and used term on the header. But important detail is  when you use this code  the \"div\" element will not keep location so if  there has a hidden element the element will be move on hidden element.\nwith this code we will see result as bellow:\n\n![Bootstrap70.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png)\n\nAs in the picture you can see div tag is in the show element  than  div tag reflected on  screen p tag area, with this we used \"lead\" class when we learn in \"p\" tag.  And now let we learn this how to do with code.\n\nNecessary code are seems to be  below:\n\n```\n<div class=\"show\">\n    <p class=\"lead\">1. Showing Elements</p>\n</div>\n\n<div class=\"hidden\">\n    <p class=\"lead\">Hidden Elements</p>\n</div>\n\n<div class=\"show\">\n    <p class=\"lead\">2. Showing Elements</p>\n</div>\n```\n\nAs you can see with \"div\" tag we apply hidden process in this way we did  hidden because lost te element location. This step working like if under element is not hiddent this element, move to which element are not hidden. But if element after changed by hidden ,  positioning gonna be normal.\n\nWith this code we will see result as bellow:\n\n![Bootstrap71.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png)\n\nAs we can see first and last \"div\" tag is came succes. If we do all \"div\" tag \"show\" class \nWith this code we will see result as bellow:\n\n```\n<div class=\"show\">\n    <p class=\"lead\">1. Showing Elements</p>\n</div>\n\n<div class=\"show\">\n    <p class=\"lead\">2. Showing Elements</p>\n</div>\n\n<div class=\"show\">\n    <p class=\"lead\">3. Showing Elements</p>\n</div>\n```\n\nAs we can see we gave all class \"show\" feature.\nWith this code we will see result as bellow:\n\n![Bootstrap72.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png)\n\nAs we can see we print on screen 3  feature with lead stlye. \n\nTo make this code we used code on below:\n\n```\n.show\n{\n    display: block !important;\n}\n.hidden\n{\n    display: none !important;\n    visibility: hidden !important;\n}\n.invisible\n{\n    visibility: hidden;\n}\n.element\n{\n    .show();\n}\n.another-element\n{\n    .hidden();\n}\n```\n\n### TEXT HIDDEN COMAND\nThis code to be understand on header  so we use this code to hidden text element. \nWhen we use this code element it  take up space even if we hidden. this code does not has not feature like \"Show & Hidden\" element to not take up space. Just we gonna hide element for visible.\nFor example to use code on bellow:\n\n```\n<h1 class=\"text-hide\">H Tag</h1>\n<p class=\"text-hide\">P Tag</p>\n<p class=\"lead\">2. P Tag</p>\n```\n\nAs we can see we use code on text element \"p\" and \"h\" tag.\nTo use this feature we just used \"test-hide\" class.\n\n### RESPONSIVE SENSITIVE VIDEO BOX\nUnder this header  we going to learn, how to add in system  sensitive to desing responsive video box .\nWhen we add video box, we have two primary add video box stlye \none of them 4:3 resolution , one of other is 16:9 resolution.\nMy advice is use 16:9 resolution because on this moument people are using mostly 16:9 resolution. And it makes this option more popular\n\nExample to use this necassary code on bellow:\n\n```\n<div class=\"embed-responsive embed-responsive-16by9\">\n    <iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/5NV6Rdv1a3I\" frameborder=\"0\" allowfullscreen></iframe>\n</div>\n<!-- 4:3 Resolution -->\n<div class=\"embed-responsive embed-responsive-4by3\">\n    <iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/5NV6Rdv1a3I\" frameborder=\"0\" allowfullscreen></iframe>\n</div>\n```\n\nAs we can see highlight part we setting resolution, with use 9:3 and 16:9 resolutions. To take example video by directly YouTube.\n\nVideo box will be like on bellow:\n\n![Bootstrap68.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png)\n\nAs we can see of picture up side we use 16:9 resolution and down side we use 4:3 resolution.If you look picture carifully you can se wich different between them. Down part video box is longer than up side.\n\n### WELL ELEMENT\n\nUnder this header we going to see \"Well\" element well element is actualy a panel\n\nPreviously lessons we saw panels, well element is working by same logic and pretty basic to use. To use well we will use div tag.\nWhen we use well  we should use sizing code  in this way we can make ideal box for our desing.\n\nExample to use this necassary code on bellow:\n\n```\n<div class=\"well well-sm\">well-sm</div>\n<div class=\"well well-lg\">well-lg</div>\n<div class=\"well well-xs\">well-xs</div>\n```\n\nAs you can see highlighted part we use sizing code, which we learn previous lesson. with this sizing code we can do directly sizing operations by html code, without do extra sizing process\nwith this code we will see result as bellow:\n\n![Bootstrap69.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png)\n\nAs you can see, we created different size of result by these code.\nAlso bootstrap is working in stable with mobile  device, we can see picture on bellow\nview look good even if  when resolution is reduced.\n\nAs you can see, it is working   on mobile devices  stabil. Already Bootstrap element are working  maximum stability and fast  on all platform and all devices.\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-clear-fix-show-and-hidden-text-hidden-commands\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"bootstrap\"],\"users\":[\"codings\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"],\"moderator\":{\"account\":\"creon\",\"time\":\"2018-02-13T12:08:01.411Z\",\"reviewed\":true,\"pending\":false,\"flagged\":false}}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "title": "Bootstrap Clear Fix, Show & Hidden, Text Hidden Commands "
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-13T12:08:00",
  "trx_id": "c01cdc912a48802b5b7032c8f7963432c01cbbdc",
  "trx_in_block": 41,
  "virtual_op": 0
}

{
  "block": 19754788,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "voter": "mvanyi",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T18:47:18",
  "trx_id": "6f875533871073f55e4a2798f62aed69bc52ea0c",
  "trx_in_block": 28,
  "virtual_op": 0
}

{
  "block": 19751499,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "@@ -18,33 +18,33 @@\n Learn?%0A- CLEAR F\n-%C4%B0\n+I\n X COMMAND%0A- SHOW\n@@ -65,25 +65,25 @@\n AND%0A- TEXT H\n-%C4%B0\n+I\n DDEN COMAND%0A\n@@ -207,17 +207,17 @@\n  CLEAR F\n-%C4%B0\n+I\n X COMMAN\n@@ -569,33 +569,36 @@\n v class=%22show%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -627,33 +627,36 @@\n class=%22hidden%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -1335,33 +1335,36 @@\n v class=%22show%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -1416,17 +1416,20 @@\n idden%22%3E%0A\n-%09\n+    \n %3Cp class\n@@ -1475,33 +1475,36 @@\n v class=%22show%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -2042,17 +2042,17 @@\n succes. \n-%C4%B0\n+I\n f we do \n@@ -2140,33 +2140,36 @@\n v class=%22show%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -2211,33 +2211,36 @@\n v class=%22show%22%3E%0A\n-%09\n+    \n %3Cp class=%22lead%22%3E\n@@ -2294,9 +2294,12 @@\n w%22%3E%0A\n-%09\n+    \n %3Cp c\n@@ -2891,17 +2891,17 @@\n # TEXT H\n-%C4%B0\n+I\n DDEN COM\n@@ -3453,16 +3453,16 @@\n SENS\n-%C4%B0T%C4%B0\n+ITI\n VE V\n-%C4%B0\n+I\n DEO \n@@ -4644,9 +4644,9 @@\n ion.\n-%C4%B0\n+I\n f yo\n",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"bootstrap\"],\"users\":[\"codings\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"]}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "title": "Bootstrap Clear Fix, Show & Hidden, Text Hidden Commands "
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T16:02:42",
  "trx_id": "42a75327c54a69cb6a585d8f2545a5cc8af597e7",
  "trx_in_block": 18,
  "virtual_op": 0
}

{
  "block": 19751475,
  "op": [
    "comment",
    {
      "author": "steemitstats",
      "body": "@codings, Upvote for supporting you.",
      "json_metadata": "{\"tags\":[\"utopian-io\"]}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels",
      "permlink": "20180210t160123885z-post",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T16:01:30",
  "trx_id": "f135e0635445729a38b478f9dce642c5df6e9092",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 19751474,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels",
      "voter": "steemitstats",
      "weight": 500
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T16:01:27",
  "trx_id": "01abf4c081ad6553baf648dcc8d1013134e696cc",
  "trx_in_block": 19,
  "virtual_op": 0
}

{
  "block": 19751468,
  "op": [
    "comment_options",
    {
      "allow_curation_rewards": true,
      "allow_votes": true,
      "author": "codings",
      "extensions": [
        [
          0,
          {
            "beneficiaries": [
              {
                "account": "utopian.pay",
                "weight": 2500
              }
            ]
          }
        ]
      ],
      "max_accepted_payout": "1000000.000 SBD",
      "percent_steem_dollars": 10000,
      "permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T16:01:09",
  "trx_id": "1d0eb708b2fc777b9b16dfa69b5190161766863b",
  "trx_in_block": 44,
  "virtual_op": 0
}

{
  "block": 19751468,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- PANELS\n- DEFAULT PANEL\n- TWO LAYERS PANEL\n- THREE LAYERS PANEL\n- COLERFUL PANEL\n- ADD GROUP BOX IN PANEL BOX\n- ADD TABLE ON PANEL BOX\n\n\n#### Requirements\nNotepad++\n\n#### Difficulty\n- Intermediate\n\n\n### PANELS\nUnder this header we going to touch on panel box which be came with Bootstrap.\n\n### DEFAULT PANEL\nThis part we going to see how to use default panel wihch be came with Bootstrap.\nVarsayılan panel adından anlaşılacağı üzere en temel ve basit amaç için yapılmış paneldir.\nDefault panel is  most primary panel to use basic  logic.\nFor example to use necessary code on below:\n\n```\n<div class=\"panel panel-default\">\n\t<div class=\"panel-body\">\n\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit sit facilis hic nostrum illum eius iste obcaecati alias at aliquid voluptates cupiditate, consequuntur, laborum magnam, et, id vel blanditiis natus.\n\t</div>\n</div>\n```\n\nAs we can see highlighted part  we make a panel box with use \"div\" tag. Than for main part we create an other \"div\" tag to make body part, than we put on example text under the post tag.\nPanel will be like on bellow:\n\n![Bootstrap73.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png)\n\nAss we can see panel has been created succesful\n\n### TWO LAYERS PANEL\nUnder this header  we going to see how to create panel with two layers.\nWith two layers panel we can create top and middle side different than each other.  We can imagine this is like \"header\" and \"body\" logic.\nFor example to use this necessary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">Hello</div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorem, ullam minus possimus maiores molestias deleniti dignissimos repudiandae beatae quas est tempora eligendi nam tempore alias consequatur commodi necessitatibus illum.\n    </div>\n</div>\n\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">World</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n</div>\n```\nA highlighted place as we can see to create top line we wrote panel and heading.\nThe code should be give ressult like on bellow:\n\n![Bootstrap63.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png)\n\nAs we can see on picture now Boxes are created by two layers. With this technical we can give the box header by easly\n\n### THREE LAYERS PANEL\nPrevious header we learn, how to use panel by two layers. And now we going to learn how to do this by three layers.\n\nActualy Three layers panels are using by to make useful boxes.With this style we can made a panel with  Header,content and footer part much better.\nFor example to use necassary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">Hello World!</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n    <div class=\"panel-footer\">\n        All rights reserved.\n    </div>\n</div>\n```\n\nAs you can see three highlighted part. Respectively first we create heading than body than footer.\nThree layers  panel look like should be on bellow:\n\n![Bootstrap64.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png)\n\nAs we can see on picture panel has been created by three layers. Also  footer and heading is look much evident.\n\n### COLERFUL PANEL\nUnder this header we going to learn. How to colorize panel by before lesson what we learn with coler code.\nWhen we use this technic we have to change default code in \"div\" tag\nExample to use this necassary code on bellow:\n\n```\n<div class=\"panel panel-danger\">\n    <div class=\"panel-heading\">\n        <h3 class=\"panel-title\">Hello World!</h3>\n    </div>\n    <div class=\"panel-body\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.\n    </div>\n</div>\n```\n\nAs we can see the part of highlighted in place of default we wrote danger in this way we got show on screen by red. And also we can use danger code which part is most important. \nWith this code we will see result as bellow:\n\n![Bootstrap65.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png)\n\n\nNow default grey panel changed by red color. Also we can use all panel code, what we learn in other lesson.\n\n### ADD GROUP BOX IN PANEL BOX\nUnder this header we going to do put box inside box. It is means we going to do separate inside the panel with group box.\nWith this technic we can put  inside panel box , different group box. Let me explain with example.\nExample to use this necassary code on bellow:\n\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-heading\">Hello World</div>\n    <div class=\"panel-body\">\n        <p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione temporibus accusamus eveniet quo non nulla corporis ex assumenda odit iusto atque vel totam, modi dignissimos laudantium inventore. Omnis, corporis voluptatibus.</p>\n    </div>\n    <ul class=\"list-group\">\n        <li class=\"list-group-item\">Go to school.</li>\n        <li class=\"list-group-item\">Go home.</li>\n        <li class=\"list-group-item\">Cook.</li>\n        <li class=\"list-group-item\">Enter the Internet.</li>\n    </ul>\n</div>\n```\n\nAs we can see on highlighted part before than finish \"div\" tag we put \"ul\" and add our data by \"li\" tag li means list.\nThe code sems to be on bellow:\n\n![Bootstrap66.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png)\n\nAs we can see on picture now we use two different structure in same time. Like this multiple use we can create  a lot  interactive structure.\n\n### ADD TABLE ON PANEL BOX\nUnder this header we going to see how to add table on panel box.\nPrevious lessons we learn on table part all detail of table formats. If we know table features we'll not diffuculty.\nExample to use this necassary code on bellow:\n\n```\n<div class=\"panel panel-default\">\n    <div class=\"panel-body\">\n        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ipsa quo iste iure corrupti reiciendis voluptatibus dolores rerum maxime, qui esse odio at quasi quam, non excepturi dolorem, voluptate perferendis!</p>\n    </div>\n    <table class=\"table\">\n        <thead>\n            <tr>\n                <th>//</th>\n                <th>Education status</th>\n                <th>City</th>\n                <th>Mail</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>1</td>\n                <td>University</td>\n                <td>New York</td>\n                <td>[email protected]</td>\n            </tr>\n            <tr>\n                <td>2</td>\n                <td>Master</td>\n                <td>Boston</td>\n                <td>[email protected]</td>\n            </tr>\n            <tr>\n                <td>3</td>\n                <td>High school</td>\n                <td>New York</td>\n                <td>[email protected]</td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n```\n\nAs you can see highlighted part, we apply  usage style of other part. To do this we add table tag before than close \"div\" tag.\nwith this code we will see result as bellow\n\n![Bootstrap67.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png)\n\nAs it seems we use panel element and table element together. It means we use multiple use. I just use standart table on this part if you wish you can use all table  features which you wish.\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-panels-two-layers-three-layers-colorful-layers-panels\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"users\":[\"abc.com\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278080/diphyxjxrwi37sioy5he.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278095/likauemaasvvcaibqsfd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278105/n5iyyjag8upfiqk9qy6x.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278115/mwgpedl8mfkmu1rixsza.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278126/lnlydha3qtgpxptottgq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518278137/ndscjlnu1qzidgtdsmvu.png\"]}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-panels-two-layers-three-layers-colorful-layers-panels",
      "title": "Bootstrap Panels, Two Layers, Three Layers, Colorful Layers Panels"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T16:01:09",
  "trx_id": "1d0eb708b2fc777b9b16dfa69b5190161766863b",
  "trx_in_block": 44,
  "virtual_op": 0
}

{
  "block": 19751292,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "@@ -4053,18 +4053,18 @@\n 4:3 \n-%C3%87%C3%B6z%C3%BCn%C3%BCrl%C3%BCk\n+Resolution\n  --%3E\n",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"bootstrap\"],\"users\":[\"codings\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"]}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "title": "Bootstrap Clear Fix, Show & Hidden, Text Hidden Commands "
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T15:52:21",
  "trx_id": "7b4aa1cd96616815d915a0b373c56a7c3ec37ebf",
  "trx_in_block": 68,
  "virtual_op": 0
}

{
  "block": 19751261,
  "op": [
    "comment_options",
    {
      "allow_curation_rewards": true,
      "allow_votes": true,
      "author": "codings",
      "extensions": [
        [
          0,
          {
            "beneficiaries": [
              {
                "account": "utopian.pay",
                "weight": 2500
              }
            ]
          }
        ]
      ],
      "max_accepted_payout": "1000000.000 SBD",
      "percent_steem_dollars": 10000,
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T15:50:48",
  "trx_id": "71d7e6f308747ca825d2d50f7e12f59acc23d23d",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 19751261,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "#### What Will I Learn?\n- CLEAR FİX COMMAND\n- SHOW & HIDDEN COMMAND\n- TEXT HİDDEN COMAND\n- RESPONSIVE SENSITIVE VIDEO BOX\n- WELL ELEMENT\n\n#### Requirements\n- Notepad++\n\n#### Difficulty\n- Intermediate\n\n\n\n### CLEAR FİX COMMAND\nAn other code command is \"Clearfix\" with this command you can do \"Fix\" by easily after to Float.\nYou can see nessecary code to do this stage below:\n\n```\n<div class=\"clearfix\">Hello World</div>\n```\n\n### SHOW & HIDDEN COMMAND\n\nThese two code you can hide element and show element when you want.\nYou can see a example to use code  below:\n\n```\n<div class=\"show\">\n\t<p class=\"lead\">Show</p>\n</div>\n\n<div class=\"hidden\">\n\t<p class=\"lead\">Hidden</p>\n</div>\n```\n\nThis stage we just make a \"div\" tag and used term on the header. But important detail is  when you use this code  the \"div\" element will not keep location so if  there has a hidden element the element will be move on hidden element.\nwith this code we will see result as bellow:\n\n![Bootstrap70.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png)\n\nAs in the picture you can see div tag is in the show element  than  div tag reflected on  screen p tag area, with this we used \"lead\" class when we learn in \"p\" tag.  And now let we learn this how to do with code.\n\nNecessary code are seems to be  below:\n\n```\n<div class=\"show\">\n\t<p class=\"lead\">1. Showing Elements</p>\n</div>\n\n<div class=\"hidden\">\n\t<p class=\"lead\">Hidden Elements</p>\n</div>\n\n<div class=\"show\">\n\t<p class=\"lead\">2. Showing Elements</p>\n</div>\n```\n\nAs you can see with \"div\" tag we apply hidden process in this way we did  hidden because lost te element location. This step working like if under element is not hiddent this element, move to which element are not hidden. But if element after changed by hidden ,  positioning gonna be normal.\n\nWith this code we will see result as bellow:\n\n![Bootstrap71.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png)\n\nAs we can see first and last \"div\" tag is came succes. İf we do all \"div\" tag \"show\" class \nWith this code we will see result as bellow:\n\n```\n<div class=\"show\">\n\t<p class=\"lead\">1. Showing Elements</p>\n</div>\n\n<div class=\"show\">\n\t<p class=\"lead\">2. Showing Elements</p>\n</div>\n\n<div class=\"show\">\n\t<p class=\"lead\">3. Showing Elements</p>\n</div>\n```\n\nAs we can see we gave all class \"show\" feature.\nWith this code we will see result as bellow:\n\n![Bootstrap72.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png)\n\nAs we can see we print on screen 3  feature with lead stlye. \n\nTo make this code we used code on below:\n\n```\n.show\n{\n    display: block !important;\n}\n.hidden\n{\n    display: none !important;\n    visibility: hidden !important;\n}\n.invisible\n{\n    visibility: hidden;\n}\n.element\n{\n    .show();\n}\n.another-element\n{\n    .hidden();\n}\n```\n\n### TEXT HİDDEN COMAND\nThis code to be understand on header  so we use this code to hidden text element. \nWhen we use this code element it  take up space even if we hidden. this code does not has not feature like \"Show & Hidden\" element to not take up space. Just we gonna hide element for visible.\nFor example to use code on bellow:\n\n```\n<h1 class=\"text-hide\">H Tag</h1>\n<p class=\"text-hide\">P Tag</p>\n<p class=\"lead\">2. P Tag</p>\n```\n\nAs we can see we use code on text element \"p\" and \"h\" tag.\nTo use this feature we just used \"test-hide\" class.\n\n### RESPONSIVE SENSİTİVE VİDEO BOX\nUnder this header  we going to learn, how to add in system  sensitive to desing responsive video box .\nWhen we add video box, we have two primary add video box stlye \none of them 4:3 resolution , one of other is 16:9 resolution.\nMy advice is use 16:9 resolution because on this moument people are using mostly 16:9 resolution. And it makes this option more popular\n\nExample to use this necassary code on bellow:\n\n```\n<div class=\"embed-responsive embed-responsive-16by9\">\n    <iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/5NV6Rdv1a3I\" frameborder=\"0\" allowfullscreen></iframe>\n</div>\n<!-- 4:3 Çözünürlük -->\n<div class=\"embed-responsive embed-responsive-4by3\">\n    <iframe width=\"560\" height=\"315\" src=\"//www.youtube.com/embed/5NV6Rdv1a3I\" frameborder=\"0\" allowfullscreen></iframe>\n</div>\n```\n\nAs we can see highlight part we setting resolution, with use 9:3 and 16:9 resolutions. To take example video by directly YouTube.\n\nVideo box will be like on bellow:\n\n![Bootstrap68.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png)\n\nAs we can see of picture up side we use 16:9 resolution and down side we use 4:3 resolution.İf you look picture carifully you can se wich different between them. Down part video box is longer than up side.\n\n### WELL ELEMENT\n\nUnder this header we going to see \"Well\" element well element is actualy a panel\n\nPreviously lessons we saw panels, well element is working by same logic and pretty basic to use. To use well we will use div tag.\nWhen we use well  we should use sizing code  in this way we can make ideal box for our desing.\n\nExample to use this necassary code on bellow:\n\n```\n<div class=\"well well-sm\">well-sm</div>\n<div class=\"well well-lg\">well-lg</div>\n<div class=\"well well-xs\">well-xs</div>\n```\n\nAs you can see highlighted part we use sizing code, which we learn previous lesson. with this sizing code we can do directly sizing operations by html code, without do extra sizing process\nwith this code we will see result as bellow:\n\n![Bootstrap69.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png)\n\nAs you can see, we created different size of result by these code.\nAlso bootstrap is working in stable with mobile  device, we can see picture on bellow\nview look good even if  when resolution is reduced.\n\nAs you can see, it is working   on mobile devices  stabil. Already Bootstrap element are working  maximum stability and fast  on all platform and all devices.\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-clear-fix-show-and-hidden-text-hidden-commands\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277019/pxxkh9nlhaz7jxqdj1hl.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277032/r8b8u0zvz60mlpqrrctd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277042/qwnujyhkfsyu8vo0e3rn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277276/e92urynanvahbwiu7qua.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1518277218/xj586wzzksxpf7a0uspc.png\"]}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-clear-fix-show-and-hidden-text-hidden-commands",
      "title": "Bootstrap Clear Fix, Show & Hidden, Text Hidden Commands "
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T15:50:48",
  "trx_id": "71d7e6f308747ca825d2d50f7e12f59acc23d23d",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 19718881,
  "op": [
    "claim_reward_balance",
    {
      "account": "codings",
      "reward_sbd": "28.794 SBD",
      "reward_steem": "0.000 STEEM",
      "reward_vests": "16578.829160 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-09T12:50:51",
  "trx_id": "147cc54af8695ca1eb3417c9ec9c995c3fa76436",
  "trx_in_block": 26,
  "virtual_op": 0
}

{
  "block": 19704150,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "sbd_payout": "5.243 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3012.575908 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-09T00:33:51",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 5
}

{
  "block": 19704150,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2006.338741 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-09T00:33:51",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 4
}

{
  "block": 19703936,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "sbd_payout": "5.238 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3020.757854 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-09T00:23:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 13
}

{
  "block": 19703936,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2012.475104 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-09T00:23:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 12
}

{
  "block": 19701143,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-breadcrumbs-oegesi-sayfalama-bildirim-kutusu",
      "sbd_payout": "3.993 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2302.904769 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T22:03:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 10
}

{
  "block": 19701143,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-breadcrumbs-oegesi-sayfalama-bildirim-kutusu",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1533.906373 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T22:03:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 9
}

{
  "block": 19675806,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-konumlandirma-boyutlandirma-ve-tab-manue-yapimi",
      "sbd_payout": "3.914 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2255.967242 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T00:48:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 27
}

{
  "block": 19675806,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-konumlandirma-boyutlandirma-ve-tab-manue-yapimi",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1501.251093 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T00:48:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 26
}

{
  "block": 19675592,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-glyph-icon-kuetuephenesi-kullanimi",
      "sbd_payout": "5.210 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3000.458034 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T00:37:15",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 11
}

{
  "block": 19675592,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-glyph-icon-kuetuephenesi-kullanimi",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1998.260054 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-08T00:37:15",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 10
}

{
  "block": 19671019,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-html-icin-yardimci-oegreler",
      "sbd_payout": "5.196 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2986.165353 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T20:47:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 9
}

{
  "block": 19671019,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-html-icin-yardimci-oegreler",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "1990.095129 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T20:47:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 8
}

{
  "block": 19601237,
  "op": [
    "claim_reward_balance",
    {
      "account": "codings",
      "reward_sbd": "29.148 SBD",
      "reward_steem": "0.000 STEEM",
      "reward_vests": "13317.293150 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-05T10:34:27",
  "trx_id": "6885e9bd21dbbd23533afcbe2a54c06e1a9066f7",
  "trx_in_block": 42,
  "virtual_op": 0
}

{
  "block": 19599637,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-resim-cerceve-islemleri-ve-buton-durumlari",
      "sbd_payout": "6.482 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3129.733616 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-05T09:14:30",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 21
}

{
  "block": 19599637,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-resim-cerceve-islemleri-ve-buton-durumlari",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2084.443500 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-05T09:14:30",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 20
}

{
  "block": 19599021,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-buton-islemleri",
      "sbd_payout": "6.506 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3127.691380 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-05T08:43:42",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 19
}

{
  "block": 19599021,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-buton-islemleri",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2082.400147 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-05T08:43:42",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 18
}

{
  "block": 19585546,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "permlink": "re-codings-bootstrap-animasyon-active-disable-kodlari-kullanimi-20180204t212933701z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T21:29:33",
  "trx_id": "bc3b85ffd94bc2ab3538165d4ad2c818f54f7c58",
  "trx_in_block": 40,
  "virtual_op": 0
}

{
  "block": 19585545,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "voter": "utopian-io",
      "weight": 197
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T21:29:30",
  "trx_id": "cdacff364d7bafc11d819df3cdf6627272e80eea",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 19585495,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "permlink": "re-codings-bootstrap-uyari-kutulari-durum-cubuklari-20180204t212700225z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T21:27:00",
  "trx_id": "f4dac3312bc80606fcd5fc7a79af15e0ee5ad1d4",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 19585494,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "voter": "utopian-io",
      "weight": 197
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T21:26:57",
  "trx_id": "858ddc15562c82fa600f3b2eae662b922bb4720a",
  "trx_in_block": 41,
  "virtual_op": 0
}

{
  "block": 19570930,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "voter": "steemitri",
      "weight": 0
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T09:18:15",
  "trx_id": "bdf723837134bb54b969078f1ef6cf747c1559b9",
  "trx_in_block": 11,
  "virtual_op": 0
}

{
  "block": 19570923,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "voter": "steemitri",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T09:17:54",
  "trx_id": "0a90d31ed7ceaef75d0bcc5420baab2b433eb81b",
  "trx_in_block": 17,
  "virtual_op": 0
}

{
  "block": 19559397,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "ikonlarin-kullanimi-success-ve-diger-renk-kodlari",
      "sbd_payout": "6.936 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3091.083504 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T23:41:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 7
}

{
  "block": 19559397,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "ikonlarin-kullanimi-success-ve-diger-renk-kodlari",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2057.994708 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T23:41:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 6
}

{
  "block": 19556477,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "voter": "zapper",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:15:00",
  "trx_id": "dc151d5c4eae87d4158d9f687c401e370ecda5a2",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 19556474,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "voter": "zapper",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:14:48",
  "trx_id": "1518d77a5da75779d1d665af4ec9b91152836234",
  "trx_in_block": 80,
  "virtual_op": 0
}

{
  "block": 19556464,
  "op": [
    "comment",
    {
      "author": "jestemkioskiem",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "permlink": "re-codings-bootstrap-uyari-kutulari-durum-cubuklari-20180203t211416472z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:14:18",
  "trx_id": "6b17ea9ddd481a772b06b9aeb60c1faa32324b8c",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 19556456,
  "op": [
    "comment",
    {
      "author": "jestemkioskiem",
      "body": "Thank you for the contribution. It has been approved.\n\nYou can contact us on [Discord](https://discord.gg/uTyJkNm).\n**[[utopian-moderator]](https://utopian.io/moderators)**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "permlink": "re-codings-bootstrap-animasyon-active-disable-kodlari-kullanimi-20180203t211351475z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:13:54",
  "trx_id": "64eb207e85a16fc6123a437ad58e0c0b808d41ea",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 19556455,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "### Neler Öğreneceğim?\n- UYARI KUTUCUKLARI\n- UYARI KUTUCLIKLARINA KAPATMA BUTONU EKLEME\n- UYARI KUTUCUKLARINA LİNK EKLEME\n- ÇUBUKLAR\n- VARSAYILAN DURUM ÇUBUĞU\n- DURUM ÇUBUĞUNUN IÇINE YAZI EKLEME\n- DURUM ÇUBUKLARINI RENKLENDİRME\n- DURUM ÇUBUKLARINA ÇİZGİLİ GÖRÜNÜM VERME\n\n### Gereksinimler\n- Notepad++\n\n### Zorluk Düzeyi\n- Intermediate (Orta Seviye)\n\n<center>![bootstrap.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png)</center>\n\n#### UYARI KUTUCUKLARI\nBu başlık altında sitemize nasıl uyarı kutucukları ekleyebiliriz, buna değineceğiz. Uyarı kutucuklarını eklerken daha önceden öğrenmiş olduğumuz renk kodlarından faydalanacağız.\nBootstrap tarafından oluşturulmuş renk kodları aslında işlemsel sıraya göre yapılmış, fakat siz istediğiniz şekilde kullanabilirsiniz. Uyarı kutucuklarını oluştururken \"div\" etiketlerinden faydalanacağız. Div etiketi ile uyarı kutucuğunu oluşturup içine istediğimiz elementleri ekleyeceğiz.\n\nUyarı kutucuklarımızın tamamı için gerekli olan kodlar aşağıdaki gibidir : \n```\n<div class=\"alert alert-info\" role=\"alert\">info</div>\n<div class=\"alert alert-success\" role=\"alert\">success</div>\n<div class=\"alert alert-danger\" role=\"alert\">danger</div>\n<div class=\"alert alert-warning\" role=\"alert\">warning</div>\n```\n\nGöründüğü gibi dört adet alert kodumuzu kullandık.\nKodlarımızın çıktısı ise aşağıdaki gibi olacaktır:\n\n![Bootstrap47.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530659/byjex2bfgxa5sbsac0go.png)\n\nResimde göründüğü gibi kodlarımızın yazılış sırasına göre \"div\" etiketi ile oluşturmuş olduğumuz uyarı kutucukları ekrana başarılı olarak çıktı verdi. Kutucuklarımızda yer alan metinler göründüğü gibi kutuda yer alan renge göre şekillenmiştir. Bu sayede renk uyumu bozulmamaktadır.\n\nUyarı kutucuklarını, isterseniz işlem sırasına göre isterseniz kendi renk uyumunuza göre kullanabilirsiniz. Ayrıca bu kutulara istediğiniz her türlü öğeyi kolaylıkla ekleyebilirsiniz.\n\n#### UYARI KUTUCLIKLARINA KAPATMA BUTONU EKLEME\nBu başlık altında daha önceden öğrenmiş olduğumuz uyarı kutucuklarına, kapatma butonunu nasıl ekleriz bunu öğreneceğiz.\nEğer sitenizde uyarı kutularını kullanmak istiyorsanız ve aynı zamanda kullanıcının istediği zaman bu kutuları kapatabilmesini istiyorsanız, bu konuyu dikkatlice inceleyiniz.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"alert alert-success\">İşleminiz onaylanmıştır!\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Kapat</span></button>\n</div>\n```\n\nKodlarımızda göründüğü gibi div etiketimizi standart olarak ekledik, fakat kapatma butonu için button etiketini kullandık. Artık kapatılabilen bir bildirim kutucuğu elde etmiş olduk.\nKodlarımızın çıktısı ise aşağıdaki gibi olacaktır:\n\n![Bootstrap48.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530669/ri8dol1rysgyi7kl79gr.png)\n\n\nGöründüğü gibi sağ kısımda kapatma butonumuz yazıya hizalanmış olarak göründü. Ayrıca butonun üzerine gelindiği zaman rengi koyulaşıyor. Buton tamamıyla çalışmaktadır. Tıkladığınız andan itibaren, ekrandan uyarı kutucuğu yok olacaktır.\n\n##### UYARI KUTUCUKLARINA LİNK EKLEME\nBu başlık altında uyarı kutucuklarına nasıl link ekleyebiliriz bunu öğreneceğiz. Yani; özetle bir paragraftaki yazıyı kolaylıkla link yapabileceğiz.\nÖrnek kullanım için gerekli Olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"alert alert-danger\">\n    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eos omnis id ad delectus nam eveniet sit quas itaque dolorum iste deserunt vel, ipsum ratione \nalias eligendi, impedit voluptate <a href=\"#\" class=\"alert-link\">sed.</a>\n    <button type=\"button\" class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Kapat</span></button>\n</div>\n```\n\nVurgulamış olduğum yerde göründüğü gibi standart \"a\" etiketini kullandık, fakat sınıf olarak Bootstrap tarafından oluşturulmuş sınıfı kullandık.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :\n\n![Bootstrap49.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530678/amkeyuackoxssiz28ch2.png)\n\n\nResimde görüldüğü üzere \"sed\" kısmını link haline çevirdik. Ayrıca üzerine gelindiğinde altında link çizgisi oluştu. Bununla beraber kapatma butonunuda başarılı olarak ekledik. Dediğim gibi, bu kullanım sayesinde herhangi bir paragrafta yer alan kelimeyi kolaylıkla link türüne çevirebilirsiniz. Çevirilen kelime ayrıca kalın olarak görünecektir.\n\n### ÇUBUKLAR\nBazı web sitelerinde çubuklar görürüz. Bu çubuklar genel olarak \"Progress Bar\" yani ilerleme çubuğu olarak adlandırılırlar. Bu çubuklar sayesinde birşeyin ne kadar yüzdeye sahip olduğunu gösterebilirsiniz.\n\n#### VARSAYILAN DURUM ÇUBUĞU\nBu başlık altında Bootstrap ile gelen varsayılan durum yani ilerleme çubuğunu ele alacağız. Bu çubuk en temel kullanım için geliştirilmiştir.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"progress\">\n    <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 90%;\">\n        <span class=\"sr-only\">90% Tamamlandı</span>\n    </div>\n</div>\n```\n\nBu kısımda ekranda ne kadar yüzdelik kısım gösterileceği \"style=\"width: 90%;\" kısmı ile sağlanmaktadır. Doksan değerini güncelleyerek istediğiniz genişliğe ulaşabilirsiniz.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır:\n\n![Bootstrap50.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530685/xphljzwomxrve1emvrsv.png)\n\nResimde göründüğü gibi, ekranda %90'lık alanı kaplayarak çıktıyı mavi renkte verdi. Bootstrap ile birçok öğe düzgün grafiklere sahip. Örneğin; bu ilerleme çubuğunun yer aldığı sayfayı büyütsek bile çubuğun görüntüsü bozulmamaktadır.\nBüyütülmüş ilerleme çubuğuna dair örnek çıktı aşağıdaki gibidir :\n\n![Bootstrap51.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530693/cs0ikodvwc0d8nsi2hsr.png)\n\n\nBu resimde ben sayfamı %500 oranında büyüttüm. Sizde bunun gibi bir çıktı elde etmek istiyorsanız \"CTRL\" (OS X kullanıyorsanız CMD) ve \"+\" tuşuna basarak sayfanızı büyütebilirsiniz.\n\n#### DURUM ÇUBUĞUNUN IÇINE YAZI EKLEME\nBu başlık altında öğrenmiş olduğumuz durum çubuğunda nasıl yazı ekleyebiliriz, bunu öğreneceğiz.\nDurum çubuklarına yazı ekleyerek daha işlevsel olmasını sağlayabilirsiniz. Bu eklenen yazılar kullanıcı deneyimi açısından farklılıklar oluşturabilir.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"progress\">\n    <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"20\" aria-valuemax=\"100\">\n        %0\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 90%;\">\n        <span class=\"sr-only\">90% Tamamlandı</span>\n        %90 Oranında Tamamlandı.\n    </div>\n</div>\n```\n\nYazmak istediğimiz sözcüğü div etiketlerinin arasına yerleştirdik. Bu sayede ek öğe kullanmadan yazdırmak istediğimiz yazıyı oluşturmuş olduk.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :\n\n![Bootstrap52.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530700/hu05vzjrodpshk9kffib.png)\n\n\nResimde göründüğü gibi, kodlarımız ekranda sıralı olarak çıktı verdi. Eklediğimiz sözcükler durum çubuğuna ortalı olarak başarılı bir şekilde çıktı verdi.\n\n#### DURUM ÇUBUKLARINI RENKLENDİRME\nBu başlık altında durum çubuklarını mavi renk dışında nasıl diğer renkler ile kullanabiliriz bunu öğreneceğiz.\nVarsayılan kodlarda gelen mavi renk her tasarıma uymayabilir, bu yüzden diğer renk kodları ile kullanarak çok daha başarılı tasarımlar ortaya çıkarabilirsiniz.\nDaha önceden birçok bölümde kullandığımız ve hatta bu bölümde de kullanmış olduğumuz renk kodlarını bu kısımda da tekrar kullanacağız.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-success\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-danger\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-warning\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n```\n\nKodlarımızda göründüğü gibi, daha önceden öğrenmiş olduğumuz renk kodlarını div etiketine sınıf atayarak kullandık. Ayrıca tüm çubukları %50 oranında tamamlanmış olarak yaptık.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır:\n\n![Bootstrap53.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530738/ahg3i9ssoutliaqxeeel.png)\n\n\nResimde göründüğü gibi, renk kodlarımızın sırasına göre çubuklarımız sıralandı. Bununla beraber ben daha iyi algılanması açısından sayfayı %200 boyutunda büyütüp çıktıyı sayfamıza dahil ettim. Ayrıca belirttiğim gibi hepsi aynı genişlikte çıktı verdi, bunun nedeni ise hepsini %50 olarak boyutlandırmamızdır.\n\n#### DURUM ÇUBUKLARINA ÇİZGİLİ GÖRÜNÜM VERME\nBu başlık altında öğrenmiş olduğumuz durum çubuklarına nasıl çizgili görünüm verebiliriz bunu öğreneceğiz.\nBu çizgili görünüm aslında gündelik hayatta sıkça karşılaştığımız bir stildir. Bu kullanım sayesinde daha hoş ve daha baskın bir görünüm elde edebilirsiniz.\n\nBu kullanımın tek eksi yönü \"Internet Explorer 8\" ile çalışmamasıdır. Zaten yapılan birçok ankette artık Internet Explorer eskiye oranla çok daha az kullanılmaktadır. Bu yüzden çok dikkat edilecek bir husu değildir. \n\nBootstrap'ın bir çok uyumluluk sorununu ortadan kaldırdığını söylemiştik fakat bazı tarayıcılar aşırı derecede eskimiş durumda bu yüzden yapılabilecek tüm şeyler ortadan kalkıyor.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir:\n```\n<div class=\"progress\">\n<!-- Animasyonlu Çubuk -->\n    <div class=\"progress-bar progress-bar-info progress-bar-striped active\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"\nwidth: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n<!-- Animasyonlu Çubuk Bitiş -->\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-success progress-bar-striped\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: \n50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-danger progress-bar-striped\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: \n50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-warning progress-bar-striped\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: \n50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n</div>\n```\n\nVurgulamış olduğum alanlarda göründüğü gibi, \"Striped\" yazarak çizgili olarak görünmesini sağlamış olduk.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :\n\n![Bootstrap54.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530751/wb2awb1ojwjioqcg7t9e.png)\n\nResimde göründüğü gibi, artık daha farklı bir görünüm elde etmiş olduk. Bu sebeple kutucuklarımıza dikey çizgiler eklenmiş oldu.\n\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-uyari-kutulari-durum-cubuklari\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530659/byjex2bfgxa5sbsac0go.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530669/ri8dol1rysgyi7kl79gr.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530678/amkeyuackoxssiz28ch2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530685/xphljzwomxrve1emvrsv.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530693/cs0ikodvwc0d8nsi2hsr.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530700/hu05vzjrodpshk9kffib.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530738/ahg3i9ssoutliaqxeeel.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530751/wb2awb1ojwjioqcg7t9e.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530659/byjex2bfgxa5sbsac0go.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530669/ri8dol1rysgyi7kl79gr.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530678/amkeyuackoxssiz28ch2.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530685/xphljzwomxrve1emvrsv.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530693/cs0ikodvwc0d8nsi2hsr.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530700/hu05vzjrodpshk9kffib.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530738/ahg3i9ssoutliaqxeeel.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517530751/wb2awb1ojwjioqcg7t9e.png\"],\"moderator\":{\"account\":\"jestemkioskiem\",\"time\":\"2018-02-03T21:13:52.909Z\",\"flagged\":false,\"reviewed\":true,\"pending\":false}}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-uyari-kutulari-durum-cubuklari",
      "title": "Bootstrap Uyarı Kutuları, Durum Çubukları"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:13:51",
  "trx_id": "078700c3e8af19a493fa39cee727b2f69b21cd61",
  "trx_in_block": 99,
  "virtual_op": 0
}

{
  "block": 19556452,
  "op": [
    "comment",
    {
      "author": "codings",
      "body": "### Neler Öğreneceğim?\n- ANİMASYON EKLEME\n- İÇ İÇE GEÇMIŞ ÇUBUKLAR\n- UL ETİKETİ İLE GRUPLANDIRMA YAPMA\n- GRUP KUTULARINA BILDIRIM EKLEME\n- ACTIVE KODU ILE KULLANIM\n- DISABLED KODU İLE KULLANIM\n- RENK KODLARI İLE KULLANIM\n- GRUP KUTULARINI İÇERİK KUTUSU HALINE DÖNÜŞTÜRME\n\n### Gereksinimler\n- Notepad++\n\n### Zorluk Düzeyi\n- Intermediate (Orta Seviye)\n\n<center>![bootstrap.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png)</center>\n\n#### ANİMASYON EKLEME\nBu başlık altında öğrenmiş olduğumuz çizgi desenini, nasıl animasyonlu olarak oynatabiliriz bunu öğreneceğiz.\nDurum çubuklarına animasyon ekleyerek, kullanıcının sitemize daha çok ilgi göstermesini sağlayabilirsiniz. Bu sayede ek çaba göstermeden kolayca çubukları vurgulamış olursunuz.\n\nAnimasyonu eklemek oldukça kolay. Sadece yapmamız gereken sınıf kısmına ufak bir sözcük daha eklemek olacaktır.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"progress\">\n<!-- Animasyonlu Çubuk -->\n    <div class=\"progress-bar progress-bar-info progress-bar-striped active\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"\nwidth: 50%\">\n        <span class=\"sr-only\">50%</span>\n    </div>\n<!-- Animasyonlu Çubuk Bitiş -->\n</div>\n```\n\nGöründüğü gibi, sadece \"active\" ekleyerek animasyonun oluşturulmasını sağlamış olduk. Bu animasyonu eklerken \"striped\" mutlaka olmalıdır, aksi taktirde animasyon, animasyonun uygulanacağı bir nesne olmayacaktır. Bu kısımda resim versemde hiçbir şey anlaşılmayacaktır.\n\n#### İÇ İÇE GEÇMIŞ ÇUBUKLAR\nBu başlık altında nasıl iç içe geçmiş ilerleme çubukları yapabiliriz bunu öğreneceğiz.\nBu tarz kullanım sayesinde web sayfanızda daha fazla alan elde edebilirsiniz. Veya bir şeyi tek bir alanda göstermek istiyorsanız bu kullanımı uygulayabilirsiniz.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"progress\">\n    <div class=\"progress-bar progress-bar-info\" style=\"width: 45%\">\n        <span class=\"sr-only\">45%</span>\n    </div>\n    <div class=\"progress-bar progress-bar-danger progress-bar-striped active\" style=\"width: 30%\">\n        <span class=\"sr-only\">30%</span>\n    </div>\n    <div class=\"progress-bar progress-bar-success\" style=\"width: 20%\">\n        <span class=\"sr-only\">20%</span>\n    </div>\n</div>\n```\n\nBu kısımda sadece vurgulamış olduğum yerde anlaşılacağı gibi, çubuklarımızı sadece bir adet div içinde kullandık. Diğer örneklerde her bir çubuk için ayrı div etiketi kullanmıştık.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :\n![Bootstrap55.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531363/rovv4eu8xmpy1qtdnrph.png)\n\n\nGöründüğü gibi, tek bir div etiketi kullanarak kodlarımızı yazdık. Bununla beraber yazmış olduğumuz büyüklük değerleri tek bir çubuk için geçerli oldu yani toplam olarak üç çubuğumuz %95 oranında yer kaplamış oldu.\n\n#### UL ETİKETİ İLE GRUPLANDIRMA YAPMA\nBu başlık altında uı etiketini kullanarak nasıl gruplar yapabiliriz bunu öğreneceğiz.\nUL, etiketleri sayesinde kolayca gruplandırma yapabiliriz. Gruplandırma yaparken bir diğer kullanacağımız öğe ise \"li\"\" etiketidir. li etiketi sayesinde grup öğelerini ekleyeceğiz.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<ul class=\"list-group\">\n    <li class=\"list-group-item\">Hamburger</li>\n    <li class=\"list-group-item\">Tost</li>\n    <li class=\"list-group-item\">Döner</li>\n    <li class=\"list-group-item\">Köfte</li>\n    <li class=\"list-group-item\">Tavuk</li>\n    <li class=\"list-group-item\">Patates Kızartması</li>\n    <li class=\"list-group-item\">Adana Kebap</li>\n    <li class=\"list-group-item\">Beyti Sarma</li>\n</ul>\n```\n\nKodlarımızda göründüğü gibi, İlk olarak \"ul.\" etiketini kullandık. Ardından \"li\" etiketleri ile ara öğelerimizi oluşturduk. Ben gruplandırma kutucuğumuz için sekiz adet \"li\" etiketi kullandım.\nKodlarımızın çıktısı ise aşağıdaki gibi olacaktır :\n![Bootstrap56.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531373/hvhlf4eax5wixmakubl7.png)\n\n\nGöründüğü gibi, li etiketi ile eklediğimiz öğeler başarılı bir şekilde grup kutusunda çıktı verdi. Grup kutusu resimde göründüğü gibi yuvarlak hatlara sahip bir kutudur.\n\n#### GRUP KUTULARINA BILDIRIM EKLEME\nBu başlık altında daha önceden öğrenmiş olduğumuz bildirim öğelerini, nasıl grup kutucuklarında yer alan kelimelerin sağ tarafına ekleyebiliriz, bunu öğreneceğiz.\nBildirim ekleyerek, ayrıca bu bildirimleri başka bir web dili ile bir olaya göre çalışabilir hale getirirseniz, çok daha başarılı sonuçlar elde edebilirsiniz.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<ul class=\"list-group\">\n    <li class=\"list-group-item\">\n        <span class=\"badge\">11</span>Hamburger\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">22</span>Tost\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">33</span>Döner\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">44</span>Köfte\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">55</span>Tavuk\n    </li>\n</ul>\n```\n\nVurgulamış olduğum yerlerde göründüğü gibi daha önceden öğrenmiş olduğumuz span etiketlerini kullanarak bildirim ikonu oluşturmuş olduk.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır : \n\n ![Bootstrap57.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531383/of6vlesbvpgkp4c1facv.png)\n\nResimde göründüğü gibi bildirimlerimiz yazıların sağ tarafına eklenmiş oldu. \n\n#### ACTIVE KODU ILE KULLANIM\nActive kodunu birçok kısımda kullanmıştık. Tekrar bu kısımda da kullanacağız.\n\nActive sayesinde grupta yeralan herhangi birşeyi daha rahat vurgulayabilirsiniz. Bu sayede, kullanıcıya daha dikkat çekici nesneler oluşturabilirsiniz.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<ul class=\"list-group\">\n    <li class=\"list-group-item active\">\n        <span class=\"badge\">11</span>Hamburger\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">22</span>Tost\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">33</span>Döner\n    </li>\n    <li class=\"list-group-item active\">\n        <span class=\"badge\">44</span>Köfte\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">55</span>Tavuk\n    </li>\n</ul>\n```\n\nVurgulamış olduğum alanlarda göründüğü gibi, sadece ilk başta yazmış olduğumuz sınıftan sonra bir boşluk vererek \"active\" yazdık. Bu sayede artık active yazmış olduğumuz satır mavi renge bürünecek.\nActive kullanımına dair çıktımız aşağıdaki gibi olacaktır:\n\n![Bootstrap58.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531391/w2enzieozsizamodp0bb.png)\n\nResimde göründüğü gibi, iki öğemiz vurgulanmış oldu. Ayrıca göründüğü gibi mavi üzerine siyah rengin okunması zor olduğu için otomatik olarak yazılar mavi bölgede beyaz renge dönüştü.\n\n#### DISABLED KODU İLE KULLANIM\nDaha önceden active kodu gibi bu kodu da birçok kısımda kullanmıştık. Şimdi bu kısımda da tekrar kullanacağız.\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<ul class=\"list-group\">\n    <li class=\"list-group-item disabled\">\n        <span class=\"badge\">11</span>Hamburger\n    </li>\n    <li class=\"list-group-item disabled\">\n        <span class=\"badge\">22</span>Tost\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">33</span>Döner\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">44</span>Köfte\n    </li>\n    <li class=\"list-group-item\">\n        <span class=\"badge\">55</span>Tavuk\n    </li>\n</ul>\n```\n\nVurgulamış olduğum alanlarda göründüğü gibi, \"disabled\" kullanarak pasif olmasını sağladık.\nKod öbeğimizin çıktısı ise aşağıdaki gibi olacaktır :\n![Bootstrap59.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531400/qvthtzcwgisjaymubbnq.png)\n\n\nResimde göründüğü gibi, ilk iki öğemiz disabled durumuna geldi. Bu durum sayesinde renkleri soldu. Ayrıca göründüğü gibi, dördüncü öğemiz aktif durumda. Kodları yazarken aktif ve pasif olma durumunu aynı anda rahatlıkla kullanabilirsiniz.\n\n#### RENK KODLARI İLE KULLANIM\nBu başlık altında grup kutucuklarında yer alan öğeleri, nasıl farklı renklerde gösterebiliriz, bunu öğreneceğiz.\n\nDaha önceden birçok bölümde renk kodlarından faydalanmıştık. Bu bölümde tekrar önceden öğrenmiş olduğumuz renk kodlarını kullanacağız. Renk kodlarını kullanmak web sayfalarında daha başarılı görünümler elde etmenizi sağlar. Özellikle nı için renk uyumu önemli bir yer kaplamaktadır.\n\nörnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<ul class=\"list-group\">\n    <li class=\"list-group-item list-group-item-warning\">Lorem</li>\n    <li class=\"list-group-item list-group-item-danger\">Ipsum</li>\n    <li class=\"list-group-item list-group-item-success\">Dolor</li>\n    <li class=\"list-group-item list-group-item-info\">Amet.</li>\n</ul>\n```\n\nGöründüğü gibi, aynı sınıf kuralını yazarak \"danger, info\" gibi renk kodlarını ekledik.\nRenk kodlarımızın çıktısı ise aşağıdaki gibi olacaktır:\n![Bootstrap60.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531408/tfjve2ziymckoeadptpd.png)\n\n\nResimde göründüğü gibi, artık öğelerimiz farklı renklerde çıktılar verdi.\n\n#### GRUP KUTULARINI İÇERİK KUTUSU HALINE DÖNÜŞTÜRME\nBu başlık altında, grup kutucuklarını nasıl basitçe içerik kutusu haline getirebiliriz buna değineceğiz. Grup kutularını, içerik kutuları yaparak blog sistemi tarzında çalışabilirsiniz. \n\nÖrnek kullanım için gerekli olan kodlarımız aşağıdaki gibidir :\n```\n<div class=\"list-group\">\n    <a href=\"#\" class=\"list-group-item list-group-item-danger\">\n        <h4 class=\"list-group-item-heading\">Merhaba Dünya</h4>\n        <p class=\"list-group-item-text\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque ex eum dolore ea sint. Unde asperiores at consequatur \nquisquam illo, voluptate molestiae, reprehenderit, vero ipsa quis assumenda, vel iste ab.</p>\n    </a>\n</div>\n```\n\nBu kısımda yapmış olduğumuz farklılıklar, sadece ekleyeceğimiz metin öğelerinde oldu.\nKodlarımızın çıktısı ise aşağıdaki gibi olacaktır :\n![Bootstrap61.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531417/wtlsv8o20vxyxla7fxoe.png)\n\n\nGöründüğü gibi, çıktımızda bir adet başlık ve bir adet metin öğesi yer alıyor. Bununla beraber kodlarımızda göründüğü gibi, ben \"danger\" kullanarak kırmızı renkte çıktı vermesini sağladım.\n\n\n<br /><hr/><em>Posted on <a href=\"https://utopian.io/utopian-io/@codings/bootstrap-animasyon-active-disable-kodlari-kullanimi\">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>",
      "json_metadata": "{\"community\":\"utopian\",\"app\":\"utopian/1.0.0\",\"format\":\"markdown\",\"repository\":{\"id\":2126244,\"name\":\"bootstrap\",\"full_name\":\"twbs/bootstrap\",\"html_url\":\"https://github.com/twbs/bootstrap\",\"fork\":false,\"owner\":{\"login\":\"twbs\"}},\"pullRequests\":[],\"platform\":\"github\",\"type\":\"tutorials\",\"tags\":[\"utopian-io\",\"utopian-io\",\"bootstrap\"],\"links\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531363/rovv4eu8xmpy1qtdnrph.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531373/hvhlf4eax5wixmakubl7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531383/of6vlesbvpgkp4c1facv.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531391/w2enzieozsizamodp0bb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531400/qvthtzcwgisjaymubbnq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531408/tfjve2ziymckoeadptpd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531417/wtlsv8o20vxyxla7fxoe.png\"],\"image\":[\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517217240/l7vrv3o1thvpmp9upisn.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531363/rovv4eu8xmpy1qtdnrph.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531373/hvhlf4eax5wixmakubl7.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531383/of6vlesbvpgkp4c1facv.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531391/w2enzieozsizamodp0bb.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531400/qvthtzcwgisjaymubbnq.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531408/tfjve2ziymckoeadptpd.png\",\"https://res.cloudinary.com/hpiynhbhq/image/upload/v1517531417/wtlsv8o20vxyxla7fxoe.png\"],\"moderator\":{\"account\":\"jestemkioskiem\",\"time\":\"2018-02-03T21:13:41.910Z\",\"flagged\":false,\"reviewed\":true,\"pending\":false}}",
      "parent_author": "",
      "parent_permlink": "utopian-io",
      "permlink": "bootstrap-animasyon-active-disable-kodlari-kullanimi",
      "title": "Bootstrap Animasyon, Active, Disable Kodları Kullanımı"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T21:13:42",
  "trx_id": "777e1b5777a1149dcf4da930fb8e25083b4054b7",
  "trx_in_block": 12,
  "virtual_op": 0
}

{
  "block": 19553010,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-breadcrumbs-oegesi-sayfalama-bildirim-kutusu",
      "permlink": "re-codings-bootstrap-breadcrumbs-oegesi-sayfalama-bildirim-kutusu-20180203t181700978z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T18:17:00",
  "trx_id": "435a67af8888fd790ef0feebed20f824d2c18650",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 19553009,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-breadcrumbs-oegesi-sayfalama-bildirim-kutusu",
      "voter": "utopian-io",
      "weight": 172
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T18:16:57",
  "trx_id": "1b1436164ad1efef254b3f1a23f2c4d1b6b0e897",
  "trx_in_block": 33,
  "virtual_op": 0
}

{
  "block": 19552960,
  "op": [
    "comment",
    {
      "author": "utopian-io",
      "body": "### Hey @codings I am @utopian-io. I have just upvoted you!\n#### Achievements\n- You have less than 500 followers. Just gave you a gift to help you succeed!\n- Seems like you contribute quite often. AMAZING!\n#### Suggestions\n- Contribute more often to get higher and higher rewards. I wish to see you often!\n- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!\n#### Get Noticed!\n- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!\n#### Community-Driven Witness!\nI am the first and only Steem Community-Driven Witness. <a href=\"https://discord.gg/zTrEMqB\">Participate on Discord</a>. Lets GROW TOGETHER!\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1\">Vote for my Witness With SteemConnect</a>\n- <a href=\"https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1\">Proxy vote to Utopian Witness with SteemConnect</a>\n- Or vote/proxy on <a href=\"https://steemit.com/~witnesses\">Steemit Witnesses</a>\n\n[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)\n\n**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**",
      "json_metadata": "{\"tags\":[\"utopian-io\"],\"community\":\"utopian\",\"app\":\"utopian/1.0.0\"}",
      "parent_author": "codings",
      "parent_permlink": "bootstrap-konumlandirma-boyutlandirma-ve-tab-manue-yapimi",
      "permlink": "re-codings-bootstrap-konumlandirma-boyutlandirma-ve-tab-manue-yapimi-20180203t181430575z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T18:14:30",
  "trx_id": "638b41663b345b72563df41537ca96ad0ade5a83",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 19552959,
  "op": [
    "vote",
    {
      "author": "codings",
      "permlink": "bootstrap-konumlandirma-boyutlandirma-ve-tab-manue-yapimi",
      "voter": "utopian-io",
      "weight": 172
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T18:14:27",
  "trx_id": "486f64a805e5f0df8f23813c2bb160ca0b0cdbdf",
  "trx_in_block": 48,
  "virtual_op": 0
}

{
  "block": 19546761,
  "op": [
    "author_reward",
    {
      "author": "codings",
      "permlink": "bootstrap-statik-kontrol-ve-input-fokus-oezelligi",
      "sbd_payout": "9.163 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "3940.143925 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T13:04:30",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 14
}

{
  "block": 19546761,
  "op": [
    "comment_benefactor_reward",
    {
      "author": "codings",
      "benefactor": "utopian.pay",
      "permlink": "bootstrap-statik-kontrol-ve-input-fokus-oezelligi",
      "sbd_payout": "0.000 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "2624.716851 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-03T13:04:30",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 13
}