Home > Mobile >  Laravel how to create card form
Laravel how to create card form

Time：05-28

my task is to view the contact information using laravel and I decide to make a card form. I tried "foreach" but it printed out in 1 card, I thought it would create automatically for each record. and it needs to be limited to 3 forms per row.

this is the card form

 <div  style="max-width: 540px;">
  <div >
    <div >
    @foreach ($user as $user)
      <img src="..."  alt="...">
    </div>
    <div >
      <div >
        <h5 >{{$user->user_xusern}}</h5>
        <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p ><small >Last updated 3 mins ago</small></p>
      </div>
      @endforeach
    </div>
  </div>
</div>

this my controller

public function index()
    {
        $user = DB::table("user_basic")
        ->leftjoin("user_status","user_status.status_id" , "=" , "user_basic.user_id")       
        ->leftjoin("user_employment","user_employment.emp_id" , "=" , "user_basic.user_id")     
        ->select("user_status.*", "user_basic.*" , "user_employment.*" )
        ->get();
        if (request()->filled('status') && request('status') !== null) {
            $user = $user->where('status_xtitle', request()->status);
        }
        $datatables = datatables::of($user);
        
        
        
        return view("pages.Directory.index")->with("user",$user);
    }

dd($users) output:

    Illuminate\Support\Collection {#2176 ▼
      #items: array:189 [▼
        0 => Illuminate\Support\Collection {#1420 ▼
          #items: array:3 [▼
            0 => {#1429 ▼
               "status_id": 1
               "status_xuser": "ddderexes"
               "status_xtitle": "DEACTIVATED"
               "status_zstatus_desc": "OFFLINE"
               "status_xstart_time": "2016-07-13 09:44:29"
               "status_xend_time": "2016-07-13 09:44:29"
               "status_xstat": 2
               "status_pci_agreement": ""
               "status_pci_agreement_date": null
               "remember_token": null
               "user_id": 1
               "user_xusern": "ddderexes"
               "user_xfirstname": "Dex Brian"
               "user_xmiddlename": "Dumlao"
               "user_xlastname": "Derexes"
               "user_xbirthdate": "1986-03-20"
               "user_xfirst_login": "2016-07-13 15:24:52"
               "user_xlast_login": "2018-07-11 10:58:57"
               "user_xostat": 1
               "user_xsstat": null
               "emp_id": 1
               "emp_xuser": "ddderexes"
               "emp_xuser_old": null
               "emp_xidnum": "081607-080"
               "emp_xjobtitle": "OJT"
               "emp_xsssnum": ""
               "emp_xtinnum": ""
               "emp_xcompany": "ALLCARDTECH"
               "emp_xdepartment": "IT-Operations"
               "emp_xbusinessunit": null
               "emp_xstatus": 2
               "emp_isnotemployee": null
            }
            1 => {#1427 ▼
               "status_id": 2
               "status_xuser": "rrvilog"
               "status_xtitle": "DEACTIVATED"
               "status_zstatus_desc": "OFFLINE"
               "status_xstart_time": "2016-07-13 16:31:08"
               "status_xend_time": "2016-07-13 16:31:08"
               "status_xstat": 2
               "status_pci_agreement": null
               "status_pci_agreement_date": null
               "remember_token": null
               "user_id": 2
               "user_xusern": "rrvilog"
               "user_xfirstname": "Romeo"
               "user_xmiddlename": "Ramos"
               "user_xlastname": "Vilog"
               "user_xbirthdate": "1985-08-03"
               "user_xfirst_login": "2016-07-13 16:26:48"
               "user_xlast_login": "2017-05-24 11:39:27"
               "user_xostat": 0
               "user_xsstat": null
               "emp_id": 2
               "emp_xuser": "rrvilog"
               "emp_xuser_old": null
               "emp_xidnum": "080515-1002"
               "emp_xjobtitle": "System Administrator"
               "emp_xsssnum": ""
               "emp_xtinnum": ""
               "emp_xcompany": "ALLCARDTECH"
               "emp_xdepartment": "IT-Operations"
               "emp_xbusinessunit": null
               "emp_xstatus": 2
               "emp_isnotemployee": null
            }
            2 => {#1431 ▼
               "status_id": 3
               "status_xuser": "ohcoranes"
               "status_xtitle": "ACTIVE"
               "status_zstatus_desc": "ONLINE"
               "status_xstart_time": "2016-08-11 17:26:25"
               "status_xend_time": "2016-08-11 17:26:25"
               "status_xstat": 1
               "status_pci_agreement": "ACCEPTED"
               "status_pci_agreement_date": "2019-02-08 22:15:49"
               "remember_token": "ojLj9wHGTB33oSsr6DvjQedmWgEvE8Mqadt1WPR07YdC0Jj8DhLUBtSccdqu"
               "user_id": 3
               "user_xusern": "ohcoranes"
               "user_xfirstname": "Odelon"
               "user_xmiddlename": "Hachero"
               "user_xlastname": "Coranes"
               "user_xbirthdate": "2017-08-05"
               "user_xfirst_login": "2016-07-13 16:47:35"
               "user_xlast_login": "2022-05-26 15:30:50"
               "user_xostat": 1
               "user_xsstat": null
               "emp_id": 3
               "emp_xuser": "ohcoranes"
               "emp_xuser_old": null
               "emp_xidnum": "090913457"
               "emp_xjobtitle": "IT Security Administrator"
               "emp_xsssnum": ""
               "emp_xtinnum": ""
               "emp_xcompany": "ALLCARDTECH"
               "emp_xdepartment": "IT-Operations"
               "emp_xbusinessunit": null
               "emp_xstatus": 1
               "emp_isnotemployee": null
            }
          ]
          #escapeWhenCastingToString: false
        }
        1 => Illuminate\Support\Collection {#1422 ▶}
        2 => Illuminate\Support\Collection {#1421 ▶}
        3 => Illuminate\Support\Collection {#1426 ▶}
        4 => Illuminate\Support\Collection {#1414 ▶}
        5 => Illuminate\Support\Collection {#1992 ▶}
        6 => Illuminate\Support\Collection {#1993 ▶}
        7 => Illuminate\Support\Collection {#1994 ▶}
        8 => Illuminate\Support\Collection {#1995 ▶}
        9 => Illuminate\Support\Collection {#1996 ▶}
        10 => Illuminate\Support\Collection {#1997 ▶}
        11 => Illuminate\Support\Collection {#1998 ▶}
        12 => Illuminate\Support\Collection {#1999 ▶}
        13 => Illuminate\Support\Collection {#2000 ▶}
        14 => Illuminate\Support\Collection {#2001 ▶}
        15 => Illuminate\Support\Collection {#2002 ▶}
        16 => Illuminate\Support\Collection {#2003 ▶}
        17 => Illuminate\Support\Collection {#2004 ▶}
        18 => Illuminate\Support\Collection {#2005 ▶}
        19 => Illuminate\Support\Collection {#2006 ▶}
        20 => Illuminate\Support\Collection {#2007 ▶}
        21 => Illuminate\Support\Collection {#2008 ▶}
        22 => Illuminate\Support\Collection {#2009 ▶}
        23 => Illuminate\Support\Collection {#2010 ▶}
        24 => Illuminate\Support\Collection {#2011 ▶}
        25 => Illuminate\Support\Collection {#2012 ▶}
        26 => Illuminate\Support\Collection {#2013 ▶}
        27 => Illuminate\Support\Collection {#2014 ▶}
        28 => Illuminate\Support\Collection {#2015 ▶}
        29 => Illuminate\Support\Collection {#2016 ▶}
        30 => Illuminate\Support\Collection {#2017 ▶}
        31 => Illuminate\Support\Collection {#2018 ▶}
        32 => Illuminate\Support\Collection {#2019 ▶}
        33 => Illuminate\Support\Collection {#2020 ▶}
        34 => Illuminate\Support\Collection {#2021 ▶}
        35 => Illuminate\Support\Collection {#2022 ▶}
        36 => Illuminate\Support\Collection {#2023 ▶}
        37 => Illuminate\Support\Collection {#2024 ▶}
        38 => Illuminate\Support\Collection {#2025 ▶}
        39 => Illuminate\Support\Collection {#2026 ▶}
        40 => Illuminate\Support\Collection {#2027 ▶}
        41 => Illuminate\Support\Collection {#2028 ▶}
        42 => Illuminate\Support\Collection {#2029 ▶}
        43 => Illuminate\Support\Collection {#2030 ▶}
        44 => Illuminate\Support\Collection {#2031 ▶}
        45 => Illuminate\Support\Collection {#2032 ▶}
        46 => Illuminate\Support\Collection {#2033 ▶}
        47 => Illuminate\Support\Collection {#2034 ▶}
        48 => Illuminate\Support\Collection {#2035 ▶}
        49 => Illuminate\Support\Collection {#2036 ▶}
        50 => Illuminate\Support\Collection {#2037 ▶}
        51 => Illuminate\Support\Collection {#2038 ▶}
        52 => Illuminate\Support\Collection {#2039 ▶}
        53 => Illuminate\Support\Collection {#2040 ▶}
        54 => Illuminate\Support\Collection {#2041 ▶}
        55 => Illuminate\Support\Collection {#2042 ▶}
        56 => Illuminate\Support\Collection {#2043 ▶}
        57 => Illuminate\Support\Collection {#2044 ▶}
        58 => Illuminate\Support\Collection {#2045 ▶}
        59 => Illuminate\Support\Collection {#2046 ▶}
        60 => Illuminate\Support\Collection {#2047 ▶}
        61 => Illuminate\Support\Collection {#2048 ▶}
        62 => Illuminate\Support\Collection {#2049 ▶}
        63 => Illuminate\Support\Collection {#2050 ▶}
        64 => Illuminate\Support\Collection {#2051 ▶}
        65 => Illuminate\Support\Collection {#2052 ▶}
        66 => Illuminate\Support\Collection {#2053 ▶}
        67 => Illuminate\Support\Collection {#2054 ▶}
        68 => Illuminate\Support\Collection {#2055 ▶}
        69 => Illuminate\Support\Collection {#2056 ▶}
        70 => Illuminate\Support\Collection {#2057 ▶}
        71 => Illuminate\Support\Collection {#2058 ▶}
        72 => Illuminate\Support\Collection {#2059 ▶}
        73 => Illuminate\Support\Collection {#2060 ▶}
        74 => Illuminate\Support\Collection {#2061 ▶}
        75 => Illuminate\Support\Collection {#2062 ▶}
        76 => Illuminate\Support\Collection {#2063 ▶}
        77 => Illuminate\Support\Collection {#2064 ▶}
        78 => Illuminate\Support\Collection {#2065 ▶}
        79 => Illuminate\Support\Collection {#2066 ▶}
        80 => Illuminate\Support\Collection {#2067 ▶}
        81 => Illuminate\Support\Collection {#2068 ▶}
        82 => Illuminate\Support\Collection {#2069 ▶}
        83 => Illuminate\Support\Collection {#2070 ▶}
        84 => Illuminate\Support\Collection {#2071 ▶}
        85 => Illuminate\Support\Collection {#2072 ▶}
        86 => Illuminate\Support\Collection {#2073 ▶}
        87 => Illuminate\Support\Collection {#2074 ▶}
        88 => Illuminate\Support\Collection {#2075 ▶}
        89 => Illuminate\Support\Collection {#2076 ▶}
        90 => Illuminate\Support\Collection {#2077 ▶}
        91 => Illuminate\Support\Collection {#2078 ▶}
        92 => Illuminate\Support\Collection {#2079 ▶}
        93 => Illuminate\Support\Collection {#2080 ▶}
        94 => Illuminate\Support\Collection {#2081 ▶}
        95 => Illuminate\Support\Collection {#2082 ▶}
        96 => Illuminate\Support\Collection {#2083 ▶}
        97 => Illuminate\Support\Collection {#2084 ▶}
        98 => Illuminate\Support\Collection {#2085 ▶}
        99 => Illuminate\Support\Collection {#2086 ▶}
        100 => Illuminate\Support\Collection {#2087 ▶}
        101 => Illuminate\Support\Collection {#2088 ▶}
        102 => Illuminate\Support\Collection {#2089 ▶}
        103 => Illuminate\Support\Collection {#2090 ▶}
        104 => Illuminate\Support\Collection {#2091 ▶}
        105 => Illuminate\Support\Collection {#2092 ▶}
        106 => Illuminate\Support\Collection {#2093 ▶}
        107 => Illuminate\Support\Collection {#2094 ▶}
        108 => Illuminate\Support\Collection {#2095 ▶}
        109 => Illuminate\Support\Collection {#2096 ▶}
        110 => Illuminate\Support\Collection {#2097 ▶}
        111 => Illuminate\Support\Collection {#2098 ▶}
        112 => Illuminate\Support\Collection {#2099 ▶}
        113 => Illuminate\Support\Collection {#2100 ▶}
        114 => Illuminate\Support\Collection {#2101 ▶}
        115 => Illuminate\Support\Collection {#2102 ▶}
        116 => Illuminate\Support\Collection {#2103 ▶}
        117 => Illuminate\Support\Collection {#2104 ▶}
        118 => Illuminate\Support\Collection {#2105 ▶}
        119 => Illuminate\Support\Collection {#2106 ▶}
        120 => Illuminate\Support\Collection {#2107 ▶}
        121 => Illuminate\Support\Collection {#2108 ▶}
        122 => Illuminate\Support\Collection {#2109 ▶}
        123 => Illuminate\Support\Collection {#2110 ▶}
        124 => Illuminate\Support\Collection {#2111 ▶}
        125 => Illuminate\Support\Collection {#2112 ▶}
        126 => Illuminate\Support\Collection {#2113 ▶}
        127 => Illuminate\Support\Collection {#2114 ▶}
        128 => Illuminate\Support\Collection {#2115 ▶}
        129 => Illuminate\Support\Collection {#2116 ▶}
        130 => Illuminate\Support\Collection {#2117 ▶}
        131 => Illuminate\Support\Collection {#2118 ▶}
        132 => Illuminate\Support\Collection {#2119 ▶}
        133 => Illuminate\Support\Collection {#2120 ▶}
        134 => Illuminate\Support\Collection {#2121 ▶}
        135 => Illuminate\Support\Collection {#2122 ▶}
        136 => Illuminate\Support\Collection {#2123 ▶}
        137 => Illuminate\Support\Collection {#2124 ▶}
        138 => Illuminate\Support\Collection {#2125 ▶}
        139 => Illuminate\Support\Collection {#2126 ▶}
        140 => Illuminate\Support\Collection {#2127 ▶}
        141 => Illuminate\Support\Collection {#2128 ▶}
        142 => Illuminate\Support\Collection {#2129 ▶}
        143 => Illuminate\Support\Collection {#2130 ▶}
        144 => Illuminate\Support\Collection {#2131 ▶}
        145 => Illuminate\Support\Collection {#2132 ▶}
        146 => Illuminate\Support\Collection {#2133 ▶}
        147 => Illuminate\Support\Collection {#2134 ▶}
        148 => Illuminate\Support\Collection {#2135 ▶}
        149 => Illuminate\Support\Collection {#2136 ▶}
        150 => Illuminate\Support\Collection {#2137 ▶}
        151 => Illuminate\Support\Collection {#2138 ▶}
        152 => Illuminate\Support\Collection {#2139 ▶}
        153 => Illuminate\Support\Collection {#2140 ▶}
        154 => Illuminate\Support\Collection {#2141 ▶}
        155 => Illuminate\Support\Collection {#2142 ▶}
        156 => Illuminate\Support\Collection {#2143 ▶}
        157 => Illuminate\Support\Collection {#2144 ▶}
        158 => Illuminate\Support\Collection {#2145 ▶}
        159 => Illuminate\Support\Collection {#2146 ▶}
        160 => Illuminate\Support\Collection {#2147 ▶}
        161 => Illuminate\Support\Collection {#2148 ▶}
        162 => Illuminate\Support\Collection {#2149 ▶}
        163 => Illuminate\Support\Collection {#2150 ▶}
        164 => Illuminate\Support\Collection {#2151 ▶}
        165 => Illuminate\Support\Collection {#2152 ▶}
        166 => Illuminate\Support\Collection {#2153 ▶}
        167 => Illuminate\Support\Collection {#2154 ▶}
        168 => Illuminate\Support\Collection {#2155 ▶}
        169 => Illuminate\Support\Collection {#2156 ▶}
        170 => Illuminate\Support\Collection {#2157 ▶}
        171 => Illuminate\Support\Collection {#2158 ▶}
        172 => Illuminate\Support\Collection {#2159 ▶}
        173 => Illuminate\Support\Collection {#2160 ▶}
        174 => Illuminate\Support\Collection {#2161 ▶}
        175 => Illuminate\Support\Collection {#2162 ▶}
        176 => Illuminate\Support\Collection {#2163 ▶}
        177 => Illuminate\Support\Collection {#2164 ▶}
        178 => Illuminate\Support\Collection {#2165 ▶}
        179 => Illuminate\Support\Collection {#2166 ▶}
        180 => Illuminate\Support\Collection {#2167 ▶}
        181 => Illuminate\Support\Collection {#2168 ▶}
        182 => Illuminate\Support\Collection {#2169 ▶}
        183 => Illuminate\Support\Collection {#2170 ▶}
        184 => Illuminate\Support\Collection {#2171 ▶}
        185 => Illuminate\Support\Collection {#2172 ▶}
        186 => Illuminate\Support\Collection {#2173 ▶}
        187 => Illuminate\Support\Collection {#2174 ▶}
        188 => Illuminate\Support\Collection {#2175 ▶}
      ]
      #escapeWhenCastingToString: false
    }

CodePudding user response：

Illuminate\Support\Collection {#2176 ▼
  #items: array:189 [▼
    0 => Illuminate\Support\Collection {#1420 ▼
      #items: array:3 [▼
        0 => {#1429 ▼
           "status_id": 1
           "status_xuser": "ddderexes"
           "status_xtitle": "DEACTIVATED"
           "status_zstatus_desc": "OFFLINE"
           "status_xstart_time": "2016-07-13 09:44:29"
           "status_xend_time": "2016-07-13 09:44:29"
           "status_xstat": 2
           "status_pci_agreement": ""
           "status_pci_agreement_date": null
           "remember_token": null
           "user_id": 1
           "user_xusern": "ddderexes"
           "user_xfirstname": "Dex Brian"
           "user_xmiddlename": "Dumlao"
           "user_xlastname": "Derexes"
           "user_xbirthdate": "1986-03-20"
           "user_xfirst_login": "2016-07-13 15:24:52"
           "user_xlast_login": "2018-07-11 10:58:57"
           "user_xostat": 1
           "user_xsstat": null
           "emp_id": 1
           "emp_xuser": "ddderexes"
           "emp_xuser_old": null
           "emp_xidnum": "081607-080"
           "emp_xjobtitle": "OJT"
           "emp_xsssnum": ""
           "emp_xtinnum": ""
           "emp_xcompany": "ALLCARDTECH"
           "emp_xdepartment": "IT-Operations"
           "emp_xbusinessunit": null
           "emp_xstatus": 2
           "emp_isnotemployee": null
        }
        1 => {#1427 ▼
           "status_id": 2
           "status_xuser": "rrvilog"
           "status_xtitle": "DEACTIVATED"
           "status_zstatus_desc": "OFFLINE"
           "status_xstart_time": "2016-07-13 16:31:08"
           "status_xend_time": "2016-07-13 16:31:08"
           "status_xstat": 2
           "status_pci_agreement": null
           "status_pci_agreement_date": null
           "remember_token": null
           "user_id": 2
           "user_xusern": "rrvilog"
           "user_xfirstname": "Romeo"
           "user_xmiddlename": "Ramos"
           "user_xlastname": "Vilog"
           "user_xbirthdate": "1985-08-03"
           "user_xfirst_login": "2016-07-13 16:26:48"
           "user_xlast_login": "2017-05-24 11:39:27"
           "user_xostat": 0
           "user_xsstat": null
           "emp_id": 2
           "emp_xuser": "rrvilog"
           "emp_xuser_old": null
           "emp_xidnum": "080515-1002"
           "emp_xjobtitle": "System Administrator"
           "emp_xsssnum": ""
           "emp_xtinnum": ""
           "emp_xcompany": "ALLCARDTECH"
           "emp_xdepartment": "IT-Operations"
           "emp_xbusinessunit": null
           "emp_xstatus": 2
           "emp_isnotemployee": null
        }
        2 => {#1431 ▼
           "status_id": 3
           "status_xuser": "ohcoranes"
           "status_xtitle": "ACTIVE"
           "status_zstatus_desc": "ONLINE"
           "status_xstart_time": "2016-08-11 17:26:25"
           "status_xend_time": "2016-08-11 17:26:25"
           "status_xstat": 1
           "status_pci_agreement": "ACCEPTED"
           "status_pci_agreement_date": "2019-02-08 22:15:49"
           "remember_token": "ojLj9wHGTB33oSsr6DvjQedmWgEvE8Mqadt1WPR07YdC0Jj8DhLUBtSccdqu"
           "user_id": 3
           "user_xusern": "ohcoranes"
           "user_xfirstname": "Odelon"
           "user_xmiddlename": "Hachero"
           "user_xlastname": "Coranes"
           "user_xbirthdate": "2017-08-05"
           "user_xfirst_login": "2016-07-13 16:47:35"
           "user_xlast_login": "2022-05-26 15:30:50"
           "user_xostat": 1
           "user_xsstat": null
           "emp_id": 3
           "emp_xuser": "ohcoranes"
           "emp_xuser_old": null
           "emp_xidnum": "090913457"
           "emp_xjobtitle": "IT Security Administrator"
           "emp_xsssnum": ""
           "emp_xtinnum": ""
           "emp_xcompany": "ALLCARDTECH"
           "emp_xdepartment": "IT-Operations"
           "emp_xbusinessunit": null
           "emp_xstatus": 1
           "emp_isnotemployee": null
        }
      ]
      #escapeWhenCastingToString: false
    }
    1 => Illuminate\Support\Collection {#1422 ▶}
    2 => Illuminate\Support\Collection {#1421 ▶}
    3 => Illuminate\Support\Collection {#1426 ▶}
    4 => Illuminate\Support\Collection {#1414 ▶}
    5 => Illuminate\Support\Collection {#1992 ▶}
    6 => Illuminate\Support\Collection {#1993 ▶}
    7 => Illuminate\Support\Collection {#1994 ▶}
    8 => Illuminate\Support\Collection {#1995 ▶}
    9 => Illuminate\Support\Collection {#1996 ▶}
    10 => Illuminate\Support\Collection {#1997 ▶}
    11 => Illuminate\Support\Collection {#1998 ▶}
    12 => Illuminate\Support\Collection {#1999 ▶}
    13 => Illuminate\Support\Collection {#2000 ▶}
    14 => Illuminate\Support\Collection {#2001 ▶}
    15 => Illuminate\Support\Collection {#2002 ▶}
    16 => Illuminate\Support\Collection {#2003 ▶}
    17 => Illuminate\Support\Collection {#2004 ▶}
    18 => Illuminate\Support\Collection {#2005 ▶}
    19 => Illuminate\Support\Collection {#2006 ▶}
    20 => Illuminate\Support\Collection {#2007 ▶}
    21 => Illuminate\Support\Collection {#2008 ▶}
    22 => Illuminate\Support\Collection {#2009 ▶}
    23 => Illuminate\Support\Collection {#2010 ▶}
    24 => Illuminate\Support\Collection {#2011 ▶}
    25 => Illuminate\Support\Collection {#2012 ▶}
    26 => Illuminate\Support\Collection {#2013 ▶}
    27 => Illuminate\Support\Collection {#2014 ▶}
    28 => Illuminate\Support\Collection {#2015 ▶}
    29 => Illuminate\Support\Collection {#2016 ▶}
    30 => Illuminate\Support\Collection {#2017 ▶}
    31 => Illuminate\Support\Collection {#2018 ▶}
    32 => Illuminate\Support\Collection {#2019 ▶}
    33 => Illuminate\Support\Collection {#2020 ▶}
    34 => Illuminate\Support\Collection {#2021 ▶}
    35 => Illuminate\Support\Collection {#2022 ▶}
    36 => Illuminate\Support\Collection {#2023 ▶}
    37 => Illuminate\Support\Collection {#2024 ▶}
    38 => Illuminate\Support\Collection {#2025 ▶}
    39 => Illuminate\Support\Collection {#2026 ▶}
    40 => Illuminate\Support\Collection {#2027 ▶}
    41 => Illuminate\Support\Collection {#2028 ▶}
    42 => Illuminate\Support\Collection {#2029 ▶}
    43 => Illuminate\Support\Collection {#2030 ▶}
    44 => Illuminate\Support\Collection {#2031 ▶}
    45 => Illuminate\Support\Collection {#2032 ▶}
    46 => Illuminate\Support\Collection {#2033 ▶}
    47 => Illuminate\Support\Collection {#2034 ▶}
    48 => Illuminate\Support\Collection {#2035 ▶}
    49 => Illuminate\Support\Collection {#2036 ▶}
    50 => Illuminate\Support\Collection {#2037 ▶}
    51 => Illuminate\Support\Collection {#2038 ▶}
    52 => Illuminate\Support\Collection {#2039 ▶}
    53 => Illuminate\Support\Collection {#2040 ▶}
    54 => Illuminate\Support\Collection {#2041 ▶}
    55 => Illuminate\Support\Collection {#2042 ▶}
    56 => Illuminate\Support\Collection {#2043 ▶}
    57 => Illuminate\Support\Collection {#2044 ▶}
    58 => Illuminate\Support\Collection {#2045 ▶}
    59 => Illuminate\Support\Collection {#2046 ▶}
    60 => Illuminate\Support\Collection {#2047 ▶}
    61 => Illuminate\Support\Collection {#2048 ▶}
    62 => Illuminate\Support\Collection {#2049 ▶}
    63 => Illuminate\Support\Collection {#2050 ▶}
    64 => Illuminate\Support\Collection {#2051 ▶}
    65 => Illuminate\Support\Collection {#2052 ▶}
    66 => Illuminate\Support\Collection {#2053 ▶}
    67 => Illuminate\Support\Collection {#2054 ▶}
    68 => Illuminate\Support\Collection {#2055 ▶}
    69 => Illuminate\Support\Collection {#2056 ▶}
    70 => Illuminate\Support\Collection {#2057 ▶}
    71 => Illuminate\Support\Collection {#2058 ▶}
    72 => Illuminate\Support\Collection {#2059 ▶}
    73 => Illuminate\Support\Collection {#2060 ▶}
    74 => Illuminate\Support\Collection {#2061 ▶}
    75 => Illuminate\Support\Collection {#2062 ▶}
    76 => Illuminate\Support\Collection {#2063 ▶}
    77 => Illuminate\Support\Collection {#2064 ▶}
    78 => Illuminate\Support\Collection {#2065 ▶}
    79 => Illuminate\Support\Collection {#2066 ▶}
    80 => Illuminate\Support\Collection {#2067 ▶}
    81 => Illuminate\Support\Collection {#2068 ▶}
    82 => Illuminate\Support\Collection {#2069 ▶}
    83 => Illuminate\Support\Collection {#2070 ▶}
    84 => Illuminate\Support\Collection {#2071 ▶}
    85 => Illuminate\Support\Collection {#2072 ▶}
    86 => Illuminate\Support\Collection {#2073 ▶}
    87 => Illuminate\Support\Collection {#2074 ▶}
    88 => Illuminate\Support\Collection {#2075 ▶}
    89 => Illuminate\Support\Collection {#2076 ▶}
    90 => Illuminate\Support\Collection {#2077 ▶}
    91 => Illuminate\Support\Collection {#2078 ▶}
    92 => Illuminate\Support\Collection {#2079 ▶}
    93 => Illuminate\Support\Collection {#2080 ▶}
    94 => Illuminate\Support\Collection {#2081 ▶}
    95 => Illuminate\Support\Collection {#2082 ▶}
    96 => Illuminate\Support\Collection {#2083 ▶}
    97 => Illuminate\Support\Collection {#2084 ▶}
    98 => Illuminate\Support\Collection {#2085 ▶}
    99 => Illuminate\Support\Collection {#2086 ▶}
    100 => Illuminate\Support\Collection {#2087 ▶}
    101 => Illuminate\Support\Collection {#2088 ▶}
    102 => Illuminate\Support\Collection {#2089 ▶}
    103 => Illuminate\Support\Collection {#2090 ▶}
    104 => Illuminate\Support\Collection {#2091 ▶}
    105 => Illuminate\Support\Collection {#2092 ▶}
    106 => Illuminate\Support\Collection {#2093 ▶}
    107 => Illuminate\Support\Collection {#2094 ▶}
    108 => Illuminate\Support\Collection {#2095 ▶}
    109 => Illuminate\Support\Collection {#2096 ▶}
    110 => Illuminate\Support\Collection {#2097 ▶}
    111 => Illuminate\Support\Collection {#2098 ▶}
    112 => Illuminate\Support\Collection {#2099 ▶}
    113 => Illuminate\Support\Collection {#2100 ▶}
    114 => Illuminate\Support\Collection {#2101 ▶}
    115 => Illuminate\Support\Collection {#2102 ▶}
    116 => Illuminate\Support\Collection {#2103 ▶}
    117 => Illuminate\Support\Collection {#2104 ▶}
    118 => Illuminate\Support\Collection {#2105 ▶}
    119 => Illuminate\Support\Collection {#2106 ▶}
    120 => Illuminate\Support\Collection {#2107 ▶}
    121 => Illuminate\Support\Collection {#2108 ▶}
    122 => Illuminate\Support\Collection {#2109 ▶}
    123 => Illuminate\Support\Collection {#2110 ▶}
    124 => Illuminate\Support\Collection {#2111 ▶}
    125 => Illuminate\Support\Collection {#2112 ▶}
    126 => Illuminate\Support\Collection {#2113 ▶}
    127 => Illuminate\Support\Collection {#2114 ▶}
    128 => Illuminate\Support\Collection {#2115 ▶}
    129 => Illuminate\Support\Collection {#2116 ▶}
    130 => Illuminate\Support\Collection {#2117 ▶}
    131 => Illuminate\Support\Collection {#2118 ▶}
    132 => Illuminate\Support\Collection {#2119 ▶}
    133 => Illuminate\Support\Collection {#2120 ▶}
    134 => Illuminate\Support\Collection {#2121 ▶}
    135 => Illuminate\Support\Collection {#2122 ▶}
    136 => Illuminate\Support\Collection {#2123 ▶}
    137 => Illuminate\Support\Collection {#2124 ▶}
    138 => Illuminate\Support\Collection {#2125 ▶}
    139 => Illuminate\Support\Collection {#2126 ▶}
    140 => Illuminate\Support\Collection {#2127 ▶}
    141 => Illuminate\Support\Collection {#2128 ▶}
    142 => Illuminate\Support\Collection {#2129 ▶}
    143 => Illuminate\Support\Collection {#2130 ▶}
    144 => Illuminate\Support\Collection {#2131 ▶}
    145 => Illuminate\Support\Collection {#2132 ▶}
    146 => Illuminate\Support\Collection {#2133 ▶}
    147 => Illuminate\Support\Collection {#2134 ▶}
    148 => Illuminate\Support\Collection {#2135 ▶}
    149 => Illuminate\Support\Collection {#2136 ▶}
    150 => Illuminate\Support\Collection {#2137 ▶}
    151 => Illuminate\Support\Collection {#2138 ▶}
    152 => Illuminate\Support\Collection {#2139 ▶}
    153 => Illuminate\Support\Collection {#2140 ▶}
    154 => Illuminate\Support\Collection {#2141 ▶}
    155 => Illuminate\Support\Collection {#2142 ▶}
    156 => Illuminate\Support\Collection {#2143 ▶}
    157 => Illuminate\Support\Collection {#2144 ▶}
    158 => Illuminate\Support\Collection {#2145 ▶}
    159 => Illuminate\Support\Collection {#2146 ▶}
    160 => Illuminate\Support\Collection {#2147 ▶}
    161 => Illuminate\Support\Collection {#2148 ▶}
    162 => Illuminate\Support\Collection {#2149 ▶}
    163 => Illuminate\Support\Collection {#2150 ▶}
    164 => Illuminate\Support\Collection {#2151 ▶}
    165 => Illuminate\Support\Collection {#2152 ▶}
    166 => Illuminate\Support\Collection {#2153 ▶}
    167 => Illuminate\Support\Collection {#2154 ▶}
    168 => Illuminate\Support\Collection {#2155 ▶}
    169 => Illuminate\Support\Collection {#2156 ▶}
    170 => Illuminate\Support\Collection {#2157 ▶}
    171 => Illuminate\Support\Collection {#2158 ▶}
    172 => Illuminate\Support\Collection {#2159 ▶}
    173 => Illuminate\Support\Collection {#2160 ▶}
    174 => Illuminate\Support\Collection {#2161 ▶}
    175 => Illuminate\Support\Collection {#2162 ▶}
    176 => Illuminate\Support\Collection {#2163 ▶}
    177 => Illuminate\Support\Collection {#2164 ▶}
    178 => Illuminate\Support\Collection {#2165 ▶}
    179 => Illuminate\Support\Collection {#2166 ▶}
    180 => Illuminate\Support\Collection {#2167 ▶}
    181 => Illuminate\Support\Collection {#2168 ▶}
    182 => Illuminate\Support\Collection {#2169 ▶}
    183 => Illuminate\Support\Collection {#2170 ▶}
    184 => Illuminate\Support\Collection {#2171 ▶}
    185 => Illuminate\Support\Collection {#2172 ▶}
    186 => Illuminate\Support\Collection {#2173 ▶}
    187 => Illuminate\Support\Collection {#2174 ▶}
    188 => Illuminate\Support\Collection {#2175 ▶}
  ]
  #escapeWhenCastingToString: false
}

CodePudding user response：

Part of your problem is that your foreach loop isn't opening/closing the block of code correctly. Put @foreach() above <div > and put @endforeach above the last <div>. If you want a column per card then you need to restructure the block as in it's current form it's not going to do what you want really.

In order to show 3 columns per row, make user of array_chunk to group results in a maximum of 3, loop through each row, and then subsequently loop through each user to create a column in that row. Untested, but it should work:

<div  style="max-width: 540px;">
    @foreach ($users->chunk(3) as $users)
        <div >
            @foreach($users as $user)
            <div >
              <img src="..."  alt="...">
            </div>
            <div >
              <div >
                <h5 >{{$user->user_xusern}}</h5>
                <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p ><small >Last updated 3 mins ago</small></p>
              </div>
            </div>
            @endforeach
        </div>
    @endforeach
</div>

Edit after dd() dump was added:

I slightly adjusted your column code. Your classes look like you're using Bootstrap, so in theory if you've got a .row div, with 3 .col-md-4 divs inside, it should create a row of 3 columns for you.

<div  style="max-width: 540px;">
    @foreach ($users->chunk(3) as $users)
        <div >
            @foreach($users as $user)
            <div >
              <img src="..."  alt="...">
              <div >
                <h5 >{{$user->user_xusern}}</h5>
                <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p ><small >Last updated 3 mins ago</small></p>
              </div>
            </div>
            @endforeach
        </div>
    @endforeach
</div>

Page link：https//www.codepudding.com/Mobile/422585.html

Prev:Undefined variable $attendance_status using radio button laravel
Next:How to retain delimiter within list item python
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding