{"id":21005,"date":"2020-08-07T23:06:14","date_gmt":"2020-08-08T06:06:14","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21005"},"modified":"2020-12-29T10:58:53","modified_gmt":"2020-12-29T18:58:53","slug":"bootstrap-card-component","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/","title":{"rendered":"Bootstrap Card Component"},"content":{"rendered":"\n

Bootstrap Cards<\/h2>\n\n\n\n

The Bootstrap card is one of its most popular components, and with good reason. They serve as a very flexible media container, and have some nice preset styling and formatting.<\/p>\n\n\n\n

Card content can be anything from text, images, links, buttons, lists, and can also have a header and footer.<\/p>\n\n\n\n

Bootstrap Card Basics<\/h2>\n\n\n\n

Bootstrap cards are made with flexbox, and expand to the width of their containing element by default. If we want to specify a different width, we can either use Bootstrap\u2019s width utility class on the card element itself, or we can wrap the card in a containing element, and size it with Bootstrap\u2019s column classes.
<\/p>\n\n\n\n

Let\u2019s take a look at a few examples:<\/p>\n\n\n\n

<div class="container-fluid bg-light">\n      <div class="card p-4 m-4">card 1<\/div>\n      <div class="card p-4 m-4">card 2<\/div>\n      <div class="card p-4 m-4">card 3<\/div>\n \n      <div class="card-group m-4">\n        <div class="card p-4">card 4<\/div>\n        <div class="card p-4">card 5<\/div>\n        <div class="card p-4">card 6<\/div>\n      <\/div>\n \n      <div class="card-deck m-4">\n        <div class="card p-4 m-4">card 7<\/div>\n        <div class="card p-4 m-4">card 8<\/div>\n        <div class="card p-4 m-4">card 9<\/div>\n      <\/div>\n    <\/div><\/pre><\/div>\n\n\n\n
Bootstrap\u2019s rule of thumb is to wrap everything that\u2019s inside the <body> in a CONTAINER element, which makes everything inside of it responsive. 
<\/p>\n\n\n\n
That means that it will shift size and layouts according to the current screen size.
<\/p>\n\n\n\n
In our example, we used CONTAINER-FLUID, which just makes the element full-width, as opposed to just CONTAINER, which adds horizontal margin and centers it on the page.
<\/p>\n\n\n\n
Next, we have our first set of three cards. They have no parent element other than the container so they have the default card behavior and are arranged top to bottom as we see in the screenshot:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The p-4 and m-4 you see in the code snippet represent a padding on all sides of 1.5 rem, and a margin on all sides of 1.5 rem respectively.<\/p>\n\n\n\n
Bootstrap sizing utility values:<\/h5>\n\n\n\n

0 = 0 rem;<\/p>\n\n\n\n
1 = 0.25 rem;<\/p>\n\n\n\n
2 = 0.5 rem;<\/p>\n\n\n\n
3 = 1 rem;<\/p>\n\n\n\n
4 = 1.5 rem;<\/p>\n\n\n\n
5 = 3 rem;
<\/p>\n\n\n\n
Then we have cards 4, 5, and 6, which are wrapped in a <div> with the CARD-GROUP class. They behave exactly like the BTN-GROUP class. They are joined together in a horizontal flexbox layout, and a rounded border is added to the whole group.
<\/p>\n\n\n\n
Lastly, cards 7, 8, and 9 are wrapped in a <div> with the CARD-DECK class, which joins them in a horizontal flexbox, but leaves them as separate elements visually.<\/p>\n\n\n\n
Manually sizing cards<\/h2>\n\n\n\n
Before we do some manually sized cards, let\u2019s learn a bit about Bootstrap\u2019s layout and breakpoint system.<\/p>\n\n\n\n
Bootstrap Columns<\/h3>\n\n\n\n
Bootstrap divides the page in 12 columns for easy layout development.<\/p>\n\n\n\n
Here\u2019s a quick demo to visualize it:<\/p>\n\n\n\n
<div class="row">\n        <div class="col border p-5">column 1<\/div>\n        <div class="col border p-5">column 2<\/div>\n        <div class="col border p-5">column 3<\/div>\n        <div class="col border p-5">column 4<\/div>\n        <div class="col border p-5">column 5<\/div>\n        <div class="col border p-5">column 6<\/div>\n        <div class="col border p-5">column 7<\/div>\n        <div class="col border p-5">column 8<\/div>\n        <div class="col border p-5">column 9<\/div>\n        <div class="col border p-5">column 10<\/div>\n        <div class="col border p-5">column 11<\/div>\n        <div class="col border p-5">column 12<\/div>\n      <\/div><\/pre><\/div>\n\n\n\n
First we have a wrapper for the columns called a ROW, which is just a flexbox container for them. We declare an element\u2019s sizing by writing COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUPY. 
<\/p>\n\n\n\n
In our above example, we didn\u2019t provide the breakpoint as we want this sizing no matter the size of the screen, and no number of columns because omitting it defaults to COL-1 so we get our natural 12 columns. Here\u2019s what it looks like:
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Bootstrap Breakpoints:<\/h3>\n\n\n\n
Bootstrap is a mobile-first framework, meaning that when developing with Bootstrap you prioritize mobile layouts and work your way upwards. All of it\u2019s classes affect the element from the breakpoint provided and upwards.
<\/p>\n\n\n\n
Extra small is the default so omitting the break point completely, like P-4 for example, is the same as writing P-XS-4 which would apply it on XS screen size and all of the larger ones. <\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
In other words, if you want a rule that\u2019s effective on all screens just omit the breakpoint.
<\/p>\n\n\n\n
If we wanted to reduce the padding from the example to 0.5 rem from the medium screen size and above, we\u2019d add the P-MD-2 class on the same element.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Breakpoint pixel values:<\/h4>\n\n\n\n
  • xs – screen size below 576 pixels. This is the default.<\/li>
  • sm – screen size from 576 pixels and above.<\/li>
  • md – screen size from 768 pixels and above.<\/li>
  • lg – screen size from 992 pixels and above.<\/li>
  • xl – screen size from 1200 pixels and above.<\/li><\/ul>\n\n\n\n
    Now let\u2019s use this to make our layout change depending on the screen size:<\/p>\n\n\n\n
    <div class="row">\n        <div class="col-5 col-md-7">\n          <div class="card p-4">left column card<\/div>\n          <div class="card p-4">left column card<\/div>\n          <div class="card p-4">left column card<\/div>\n          <div class="card p-4">left column card<\/div>\n        <\/div>\n        <div class="col-7 col-md-5">\n          <div class="card p-4">right column card<\/div>\n          <div class="card p-4">right column card<\/div>\n          <div class="card p-4">right column card<\/div>\n          <div class="card p-4">right column card<\/div>\n        <\/div>\n      <\/div><\/pre><\/div>\n\n\n\n
    Again, we have our ROW wrapper, and then a <div> set to COL-5 COL-MD-7, which means it will occupy 5 columns from the smallest screen size and upwards, but as soon as it reaches the medium screen size, it will change to 7 columns. After it we have a <div> with the reverse, COL-7 COL-MD-5, they\u2019re both filled with a few cards. I grabbed the screen size in the screenshot so you can see how it changes:
    <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    767 pixels width, our left <div> is 5 columns wide and the right is 7.<\/p>\n\n\n\n
    We go up 1 pixel to 768 and they change to the opposite:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Card Subcomponents<\/h2>\n\n\n\n
    Let\u2019s now utilize the full power of cards by trying out all of their subcomponents.<\/p>\n\n\n\n
    Card with Header and Footer<\/h3>\n\n\n\n
    <div class="card">\n            <div class="card-header text-center p-4">I'm a header<\/div>\n            <div class="card-body">\n              <p class="card-text">\n                first paragraph\n              <\/p>\n              <p class="card-text">\n                second paragraph\n              <\/p>\n              <a href="#" class="card-link">Link 1<\/a>\n              <a href="#" class="card-link">Link 2<\/a>\n              <a href="#" class="card-link">Link 3<\/a>\n            <\/div>\n            <div class="card-footer">\n              Footer of a Bootstrap card\n            <\/div>\n          <\/div><\/pre><\/div>\n\n\n\n
    We created a card with a centered card header, which has a border and a light gray background, and a card body below it, which gives it some padding. 
    <\/p>\n\n\n\n
    In the body, we have a few paragraphs with CARD-TEXT for some alignment, and a few links with CARD-LINK, so they\u2019re colored blue and laid out next to each other.
    <\/p>\n\n\n\n
    At the end, we made a card footer which has the same styling as the header, but we didn\u2019t center the text this time.
    <\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Card With an Image Cap<\/h3>\n\n\n\n
    This time, we\u2019ll add an image cap to the card, a title and subtitle to the card\u2019s body, and a list group with links as list items:<\/p>\n\n\n\n
    <div class="card">\n            <img\n              src="https:\/\/via.placeholder.com\/100"\n              alt=""\n              class="card-img-top"\n            \/>\n            <div class="card-body">\n              <h3 class="card-title">card title in the card's body<\/h3>\n              <h4 class="card-subtitle mb-4">card subtitle<\/h4>\n \n              <p>list group with links inside:<\/p>\n              <ul class="list-group">\n                <li class="list-group-item">\n                  <a href="#" class="card-link">List link 1<\/a>\n                <\/li>\n                <li class="list-group-item">\n                  <a href="#" class="card-link">List link 2<\/a>\n                <\/li>\n                <li class="list-group-item">\n                  <a href="#" class="card-link">List link 3<\/a>\n                <\/li>\n              <\/ul>\n            <\/div>\n          <\/div><\/pre><\/div>\n\n\n\n
    I\u2019m using a very handy tool for the images conveniently called placeholder. The number at the end is the pixel width x height of the image, but that gets ignored here as the CARD-IMG-TOP stretches (or shrinks) the image into the full width of the card. The title and subtitle get some nice formatting, and we\u2019ve used one of Bootstrap\u2019s orientation utilities for padding and margin. The MB-4 you see on the subtitle stands for margin bottom.
    <\/p>\n\n\n\n
    Bootstrap padding and margin orientation:<\/h5>\n\n\n\n
    • pt\/mt – padding\/margin top<\/li>
    • pb\/mb – padding\/margin bottom<\/li>
    • pl\/ml – padding\/margin left<\/li>
    • pr\/mr – padding\/margin right<\/li>
    • py\/my – padding\/margin y axis (top and bottom)<\/li>
    • px\/mx – padding\/margin x axis (left and right)<\/li><\/ul>\n\n\n\n
      Then we have a list group which again encapsulates the list and it\u2019s individual elements with a light, rounded border. Here\u2019s our result:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      Bottom Image Cap<\/h3>\n\n\n\n
      There\u2019s no CARD-IMG-BOTTOM in bootstrap, but we can easily \u201cfake\u201d this by making a div at the bottom of the card and placing an <img class=\u201dcard-img-top\u201d inside of it.
      <\/p>\n\n\n\n
      <div class="card">\n            <div class="card-body">\n              <p class="card-text">\n                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas\n                unde corporis sed nam ad eius, pariatur, consectetur modi\n                asperiores dolorem id quaerat eos quod nesciunt repudiandae aut\n                temporibus rerum possimus.\n              <\/p>\n            <\/div>\n            <img\n              src="https:\/\/via.placeholder.com\/100"\n              alt=""\n              class="card-img-top"\n            \/>\n          <\/div><\/pre><\/div>\n\n\n\n
      I also added the good old lorem ipsum for good measure.
      <\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Side Image Cap<\/h3>\n\n\n\n
      We can also make it horizontal by adding a ROW wrapper inside of our card to lay it out horizontally, and then using COL to define the size of the image and the rest of the card:
      <\/p>\n\n\n\n
      <div class="card">\n            <div class="row">\n              <img\n                src="https:\/\/via.placeholder.com\/100"\n                alt=""\n                class="card-img-top col-6"\n              \/>\n              <div class="card-body col-6">\n                <h3 class="card-title">card title in the card's body<\/h3>\n                <h4 class="card-subtitle mb-4">card subtitle<\/h4>\n \n                <p>list group with links inside:<\/p>\n                <ul class="list-group">\n                  <li class="list-group-item">\n                    <a href="#" class="card-link">List link 1<\/a>\n                  <\/li>\n                  <li class="list-group-item">\n                    <a href="#" class="card-link">List link 2<\/a>\n                  <\/li>\n                  <li class="list-group-item">\n                    <a href="#" class="card-link">List link 3<\/a>\n                  <\/li>\n                <\/ul>\n              <\/div>\n            <\/div>\n          <\/div><\/pre><\/div>\n\n\n\n
      We just wrapped all the contents of the card in a <div class=\u201crow\u201d><\/p>\n\n\n\n
      and added COL-6 to both the image and the card body to make the card 50-50.<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Card Image as a Background<\/h3>\n\n\n\n
      We can also stretch an image over the whole card and have the text, lists, links etc, layed over it. We do it by simply giving the <img> a class of CARD-IMG and then placing everything else in a <div> with class CARD-IMG-OVERLAY. Inside of it, we configure the elements however we want.
      <\/p>\n\n\n\n
      <div class="card">\n            <img\n              src="https:\/\/via.placeholder.com\/100"\n              alt=""\n              class="card-img"\n            \/>\n            <div class="card-img-overlay">\n              <h4 class="card-title">Overlay Title<\/h4>\n              <p class="card-text">\n                Image text overlay\n              <\/p>\n              <p>second paragraph<\/p>\n              <p>third paragraph<\/p>\n              <p>fourth paragraph<\/p>\n              <div class="btn-group w-100">\n                <button class="btn btn-primary">blue<\/button>\n                <button class="btn btn-info">teal<\/button>\n                <button class="btn btn-danger">red<\/button>\n                <button class="btn btn-dark">black<\/button>\n                <button class="btn btn-success">green<\/button>\n              <\/div>\n            <\/div>\n          <\/div><\/pre><\/div>\n\n\n\n
      Here we used the width utility for the first time. The W-100 on the BTN-GROUP.
      <\/p>\n\n\n\n
      Bootstrap Width and Height Utilities:<\/h5>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      w\/h-25\/50\/75\/100 – width\/height 25%\/50%\/75%\/100%
      <\/p>\n\n\n\n
      In our case it\u2019s 100% minus the same padding that CARD-BODY applies, that\u2019s applied here by CARD-IMG-OVERLAY.<\/p>\n\n\n\n
      Card Columns<\/h3>\n\n\n\n
      There is also this option to lay out the cards in columns so that they go top to bottom first, and only when the column is filled they start on a new one.
      <\/p>\n\n\n\n
      <div class="card-columns">\n        <div class="card">\n          <h3 class="card-title text-center p-2">Title of card 1<\/h3>\n          <div class="card-body">\n            <p class="card-text">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,\n              rerum excepturi voluptate...\n            <\/p>\n          <\/div>\n        <\/div>\n        <div class="card">\n          <h3 class="card-title text-center p-2">Title of card 2<\/h3>\n          <div class="card-body">\n            <p class="card-text">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,\n              rerum excepturi voluptate...\n            <\/p>\n          <\/div>\n        <\/div>\n        <div class="card">\n          <h3 class="card-title text-center p-2">Title of card 3<\/h3>\n          <div class="card-body">\n            <p class="card-text">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,\n              rerum excepturi voluptate...\n            <\/p>\n          <\/div>\n        <\/div>\n        <div class="card">\n          <h3 class="card-title text-center p-2">Title of card 4<\/h3>\n          <div class="card-body">\n            <p class="card-text">\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,\n              rerum excepturi voluptate...\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div><\/pre><\/div>\n\n\n\n
      We simply wrap all of our cards in a <div class=\u201ccard-columns\u201d> and we get the following:
      <\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      Styling Bootstrap Cards<\/h3>\n\n\n\n
      When it comes to styling bootstrap cards, we can change their background and text color, as well as the color and look of their borders.
      <\/p>\n\n\n\n
      The styles can be applied to the whole card, it\u2019s separate subcomponents, or both. Here\u2019s a few styled cards to check out:<\/p>\n\n\n\n
      <div class="card bg-primary">\n          <div class="card-header"><h3>Header 1<\/h3><\/div>\n          <div class="card-body">\n            <p>Body 1<\/p>\n          <\/div>\n          <div class="card-footer"><p>Footer 1<\/p><\/div>\n        <\/div>\n        <div class="card bg-success text-white">\n          <div class="card-header"><h3>Header 2<\/h3><\/div>\n          <div class="card-body">\n            <p>Body 2<\/p>\n          <\/div>\n          <div class="card-footer text-danger"><p>Footer 2<\/p><\/div>\n        <\/div>\n        <div class="card bg-info text-dark border-danger">\n          <div class="card-header"><h3>Header 3<\/h3><\/div>\n          <div class="card-body">\n            <p>Body 3<\/p>\n          <\/div>\n          <div class="card-footer"><p>Footer 3<\/p><\/div>\n        <\/div>\n        <div class="card border-primary bg-dark text-white">\n          <div class="card-header border-success"><h3>Header 4<\/h3><\/div>\n          <div class="card-body text-danger">\n            <p>Body 4<\/p>\n          <\/div>\n          <div class="card-footer bg-warning text-info"><p>Footer 4<\/p><\/div>\n        <\/div><\/pre><\/div>\n\n\n\n
      The first card has a blue background (BG-PRIMARY) on the card itself, styling the whole card.
      <\/p>\n\n\n\n
      The second card has a green background (BG-SUCCESS) and white text (TEXT-WHITE) on the whole card, but red text (TEXT-DANGER) in the footer, overriding the parent element\u2019s TEXT-WHITE.
      <\/p>\n\n\n\n
      The third card has a dark blue background (BG-INFO), black text (TEXT-DARK) and a red border (BORDER-DANGER).
      <\/p>\n\n\n\n
      Finally, the fourth card has a blue border (BORDER-PRIMARY), a black background (BG-DARK), and white text (TEXT-WHITE) on the whole card.
      <\/p>\n\n\n\n
      A green border (BORDER-SUCCESS) on the header, red text (TEXT-DANGER) in the body, and a yellow background (BG-WARNING) and dark blue text (TEXT-INFO) in the footer.
      <\/p>\n\n\n\n
      Here\u2019s what our rainbow cards look like: 
      <\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      To recap<\/h2>\n\n\n\n
      The Bootstrap card is quite a powerful component with lots of options. They can be grouped into a card-deck for a separated, cohesive whole, or into a card-group to fuse them into a single entity. They can be spread out in a row, or in card-columns for a different look.
      <\/p>\n\n\n\n
      They can host images, lists and links, all in various layouts. 
      <\/p>\n\n\n\n
      They can also have their own header and footer, all with preset styles and formatting, but open for us to customize.
      <\/p>\n\n\n\n
      They are incredibly flexible, and probably one of the best examples of how much you can accomplish with Bootstrap, with so little previous setup, in so little time.<\/p>\n","protected":false},"excerpt":{"rendered":"Bootstrap Cards The Bootstrap card is one of its most popular components, and with good reason. They serve as a very flexible media container, and have some nice preset styling and formatting. Card content can be anything from text, images, links, buttons, lists, and can also have a header and footer. Bootstrap Card Basics Bootstrap…","protected":false},"author":85,"featured_media":21006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21005","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nBootstrap Card Component | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Card Component\" \/>\n<meta property=\"og:description\" content=\"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-08T06:06:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T18:58:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"680\" \/>\n\t<meta property=\"og:image:height\" content=\"1020\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stefan Dili\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stefan Dili\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\"},\"author\":{\"name\":\"Stefan Dili\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"headline\":\"Bootstrap Card Component\",\"datePublished\":\"2020-08-08T06:06:14+00:00\",\"dateModified\":\"2020-12-29T18:58:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\"},\"wordCount\":1601,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\",\"name\":\"Bootstrap Card Component | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg\",\"datePublished\":\"2020-08-08T06:06:14+00:00\",\"dateModified\":\"2020-12-29T18:58:53+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\"},\"description\":\"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg\",\"width\":680,\"height\":1020},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap Card Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b\",\"name\":\"Stefan Dili\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg\",\"caption\":\"Stefan Dili\"},\"url\":\"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Card Component | Career Karma","description":"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Card Component","og_description":"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-08T06:06:14+00:00","article_modified_time":"2020-12-29T18:58:53+00:00","og_image":[{"width":680,"height":1020,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg","type":"image\/jpeg"}],"author":"Stefan Dili","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Stefan Dili","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/"},"author":{"name":"Stefan Dili","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"headline":"Bootstrap Card Component","datePublished":"2020-08-08T06:06:14+00:00","dateModified":"2020-12-29T18:58:53+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/"},"wordCount":1601,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/","name":"Bootstrap Card Component | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg","datePublished":"2020-08-08T06:06:14+00:00","dateModified":"2020-12-29T18:58:53+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b"},"description":"Learn all about the card component introduced in bootstrap 4 previously known as wells, thumbnails and panels. Learn bootstrap with Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/aditya-chinchure-hyN9aU9Tm-c-unsplash.jpg","width":680,"height":1020},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-card-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap Card Component"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/38a169875c6272296a3430eecc389f8b","name":"Stefan Dili","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/profilna-1-150x150.jpg","caption":"Stefan Dili"},"url":"https:\/\/careerkarma.com\/blog\/author\/stefan-dili\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21005"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/21006"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}