Sections vs Containers vs Divs in Bricks Builder (Detailed Tutorial + Example Build)

Sections, Containers, and Divs serve very different purposes in Bricks Builder. In this video I'm going to walk you through exactly what those differences are, why they exist, and why they're extremely important to understand.
At the end I build a quick simple section with alternating content containers so you can see all three elements in real-world practice.
If you're a beginner or intermediate designer/dev then this is a perfect tutorial for you. I take it pretty slow and go into great detail and context.
New here from the Bricks community! Drop a comment below and let me know you're a Bricks peep! And don't forget to subscribe and hit the notification bell so you can get new Bricks tutorials in your feed.
Join the Inner Circle: digitalambitio...
Get a copy of Automatic.css: automaticcss.com
0:00 Intro
01:43 Sections
20:39 Containers
30:52 Divs
34:46 Real-World Example
52:10 Wrap-Up

[@julio7410]

Bricks community here. Bring it more Bricks, please!

[@stripedgoat]

Whoever comes from Oxygen…The properly working drag n drop in the structure panel is so satisfying to watch, haha. Great tutorial! 🙌🏼

[@Gearyco]

omg, I know!

[@techgal2010]

More Bricks tutorials, please! I am enjoying the new Bricks iterations very much.

[@andykillman]

I am new to the Bricks community. I came from Ultimatum (Now a DEAD Product) with Visual Composer. I recently took a few years off, due to illness. I just purchased Bricks a few weeks ago and haven't built anything yet because I have been trying to get my arms around it. This video was a gold find and I now feel ready to build. Please keep them coming...

[@Repko01]

Kevin, my brain just exploded! I thought I knew something, but it was all wrong. Thanks for enlightening me on essential fundamentals. In my mind, it was 8 minutes tutorial; that is how time flew. I bought bricks two days ago and still trying to find my way around. This is the very first video I watched from you, and I am going to absorb all the others now. 😃

[@daveb8795]

More Bricks please! Just got my Bricks LTD and trying to learn it. From the Oxygen, Bricks and Inner Circle communities :)

[@ElementoryMyDearWatson]

Kevin I have to say that i am rather blown away by your generosity in the amount of detail you impart for people in your videos. An absolute goldmine of information. Cant vthank you enough. I am in the process of migrating to Bricks from 'Shhh, you know what' and your videos are proving t to be invaluable.

[@ryanbrown1181]

Always gold! I just moved to Bricks for all of my personal sites; waiting for 1.5 stable before I start the rebuilds. Seeing you start to drop Bricks tuts is the last bit of validation that I needed to know moving away from Oxygen was the right move (for me). Excited for the next one!

[@rebelinc]

I mainly move from Elementor. Been waiting for Flex and grid for a decade. Gonna rebuild some sites using Bricks and Cwicly.

[@OlegYarkayev]

Thank you very much Kevin for giving so much value to the community! Every time I watch this video I find more gold nuggets.

[@VijayKumarIM]

So happy that you are covering Bricks...

[@BeneathTheBark]

Total beginner who wants to learn all about building a website using bricks, so thank you for your explanations and tutorials 👍

[@frankenjeda]

Am for Bricks, Thanks you so much for this video. can't wait to sing-up for Bricks Inner Circle.

[@elgibransb]

Very helpful Kevin, thanks! I’m using Bricks and have been trying to combine it with automatic CSS. Still in the process of learning how to work with ACSS so these types of examples and tips on its use are very helpful 👍🏽

[@MoeZainal]

I came out of my visual composer bubble and discovered many other builders, including bricks. This video contains valuable information, true gold! thank you for sharing.

[@AvalancheDesignIE]

Great viewing - keep them coming!

[@bobsshopping]

Great Job Kevin, I have been looking at Bricks since 1.5. You always do a fantastic job with all you video trainings.

[@Gearyco]

🙏

[@kwsim539]

I am a Bricks convert from Elementor and learning both Bricks and ACSS and would love to see a refresh of your ACSS playlist.

[@DimitryChamy]

Bricks here too, thanks for your tutorials and passion about adopting practical standards and conventions.

[@SingaporeMathsAcademyUK]

Your approach to teaching is briliant! Well done.

[@quickend01]

I'm from the Bricks community and a member of your inner circle, but find myself backtracking through YT as I travel the learning path. Your lessons are beyond value and I look forward to seeing more Brick on both sides of the Digital Ambition wall. Thanks for all!

[@Gearyco]

Awesome, thank you!

[@ChrisMooreOfficial]

This video is absolute GOLD! Would love to see more content about structure and the principles of good (elegant) design using Bricks. Great job man! Thank you. 🙌

[@ChrisMooreOfficial]

Can you provide the text / principles from this video in written format please? Maybe add it to the YT description or share a public Google Doc link? Thanks again for this amazing content! 🙌

[@satanishangover]

@@ChrisMooreOfficial Transcription is available for this video, not sure if that's what you mean.

[@JohnnyAnthonWichmann]

Very helpful and as a Bricks user I really have missed this. Hoping more to come.

[@webcare_live]

Great video, thank you! I missed LTD of Automatic.css but still looking for it :)

[@abundancemadeeasy2878]

Yes bricks is my way to go! Thanks for your energy 👊🏽

[@Gearyco]

You bet!

[@renpub]

So happy to finally have Bricks 1.5 running with ACSS which together make an awesome WordPress working environment.

[@crazy4uonly21]

Thank you so much for so much value in so little time. Much much love . God Bless you

[@digwillhachi]

Hands down the best info about web design out there ! (Bricks user 😉)

[@Gearyco]

Thank you!!

[@HarigopalDasa]

Many thanks Kevin. Super useful and value. Part of the Bricks Community .

[@RobCooper]

Just rewatching this again during a lunch break. This video cracks me up. Ive noticed twice in it where you start to go off on a tangent but then just jump cut to the next thought. Im hoping you did that by design. It's funny

[@yasmeenkaram9780]

Gold!! God Bless!!

[@Myleszeee]

This is invaluable content for a noobie such as myself.

[@joansey56]

Migrated to Bricks and automatic CSS. Also signed up for your inner circle. Thanks, Kevin 👏

[@geraldlopez6801]

Solid solid value Kevin! Thank you! Ignore the complainers!

[@djhaystack]

Keep up the Bricks love. Not a full-time web dude but moving from Oxy to Bricks moving forward for sure!

[@YorgoKastri]

keep it coming!🙂 was oxygen, now bricks...

[@bpr1204]

Using Elementor now moving towards Bricks. Thanks for this, this is amazing.

[@Gearyco]

Welcome!

[@francois-pierrethibault2651]

Im for bricks! You readed my mind, i was looking for that tutorial 3 days ago! Thx Kevin!

[@nmssmetalmobo107]

bricks here thanks a lot matt damon

[@ernieruiz3966]

More Bricks tutorials, please! New to bricks

[@rebelinc]

Great stuff and great eye opener. Thanks. Now I get how Automatic.css and Bricks work together.

[@Gearyco]

Yep, more to come on that specifically!

[@9999chippy]

Yes please, more Bricks tutorials

[@michailgiannopoulos5274]

I'll jump right into bricks and acss definitely. Your video was mind opening.

[@alexejlitvinec4411]

I'm using brick for my projects. Thank you for great tutorial! I'm going to look at your automatic CSS tutorial!

[@JaysonRivest]

Thanks, Kevin. I’ve been using Bricks and recently got ACSS, so love the tutorials on using them together!

[@vpsa111]

You are God sent Kevin. Thanks a ton for the information. Please make tutorials on design system and listing websites aswell.

[@danieldickson2]

This was an amazing intro into Bricks & Automatic CSS - Thank you!

[@Gearyco]

Glad you liked it!

[@ZaneWinberg]

I'm from Bricks! Great stuff, thanks Kevin!

[@ChrisAkinstlh]

Thank you, Kevin! I'm still in Oxygen but have bought Bricks and looking at developing in that.

[@GreggWatson1]

Here from the Bricks community - thanks Kevin for a very informative video that really helps with Bricks 1.5 and the new sections etc. Looking forward 1.5 stable release and looking forward to more ACSS for Bricks tutorials!

[@Pimp_Shrimp]

Really helpful, and I'm excited to get into your PB101 series! Great teacher! Laughed at the "you get what you pay for" and other cuts when you're about to ramble, lmao

[@Gearyco]

Glad to hear it!

[@mackymccormack8446]

Getting some great lols with the gold Kevin, thanks mate

[@Gearyco]

Glad you enjoyed it

[@aaqilayden373]

Im from Bricks. Great video. I really hope you make more videos. There are not alotnof bricks tutorials out there.

[@AmandaLucaseu]

Super video as always - all for bricks for the win 👍🏻

[@adamwasiluk]

Very valuable knowledge! Thank you!

[@NOALNOM]

36:17 The best #3 tabby moment of the video, haha, you should upload the extended director's uncut video, great tutorial by the way 👏👏👏

[@rockeygamer5163]

Great Video ❤️. You will make me to move to Bricks soon 😊.

[@Gearyco]

You should!

[@BGdev305]

This is Exceptionally informative.. you have a gift of taking something complicated.. and making it practical and bite-sized. You said to check you on things that are 'punkish'.. in this video and others that I've watched, you say "side by side" often. Like, "these buttons get added side by side". For those learning, "in-line" is a major major term! One that they should understand, especially when discussing elements and placement.. just my opinion.

[@Gearyco]

Good point!

[@richardc1925]

Great video Kevin! I just switched to Bricks and it is much better than my other builder. I feel once I learn it I will be building better sites!

[@Gearyco]

Have fun!

[@RMSAnalyst]

As always, I am so grateful to you, Kevin, for your awesome tutorials & Automatic CSS. Thank you so much.

[@bluefuzecom]

I’m with Bricks!

[@derekshort]

Another great lesson! Thanks!

[@matthewescobedo5985]

I'm from bricks. Haha partially I regret coming across your videos because now went down a rabbit hole of CSS 😂. But so much to learn and trying to build along side of you.

[@nielstieman9594]

I'm genuinely happy with your training and information about web design, Oxygen and now Bricks! I made the switch and re-learning some stuff with automatic CSS.

[@michaelkato8999]

Thank you for the course sir

[@mikt]

You forgot the Block :) Thank you very much for this video - much clearer now to me. I think there should be a "you use this when.." Cheatsheet with Bricks by default. Great content!

[@Gearyco]

The block wasn't available when I recorded this, unfortunately. They released it later.

[@KomentarSaya]

​@@Gearyco please make video update

[@skjelstad777]

From Bricks all the way 😊

[@matthiasbaudrexl943]

Great stuff! Thanks! I'm moved from oxy to bricks and happy to see more bricks stuff!

[@jenniferward6821]

Great tut as always. Bricks and maps with markers please. Trying to show events by location

[@AndrySalim]

This is gold! It would be very interesting to see how a real live case study video of developing a full website / blog / ecommerce with bricks and automatic.css.

[@Gearyco]

Doing a full bricks website build in the inner circle

[@chr_aikicom]

I am starting with bricks so these kind of tutorials are precious .. even if got it for free ;-) get

[@jimroberts1248]

Nice one for Bricks. Keep up the good work.

[@BKang91]

Oxygen user here. I don't even own bricks and i watched this video lol. Your videos are always A+++++ 🔥

[@dahunsi]

Absolutely great video. This should get me going on bricks. Still watching, but could not resist commenting.

[@PenaTechnologies]

Brickster here! Thanks for the detailed explanation. Love how quickly stuff can be done with ACSS! Thank God I bought the LTD :D Looking forward to more Bricks tutorials!!!!

[@Gearyco]

More on the way!

[@GlenInnesarticulate]

Moving from Divi (no sniggering) and am about to convert all of my sites to Bricks with ACSS and Metabox - bought the Plaster plugin too as it seems to make life easier (though I love the style guide page)

[@illu.pencil]

More Bricks please.

[@chantscreen]

I am Spartacus! Sorry, I'm from Bricks! Nice video. Thanks.

[@GavinDavidson]

Awesome and thanks for another super tutorial. Learnt a ton about HTML structure and layout.

[@docetes]

Great stuff as always. I'm really looking forward to your expansive inner circle video

[@tjveach]

Nice job Kevin, thanks for all your efforts

[@tjveach]

Bricks community

[@victorrenevaldiviasoto9728]

Dude, that tutorial was incredible: instant subscribe!

[@Gearyco]

🙏

[@amitjangra6454]

Great vid Kevin as always. Although, i am using Oxygen, but i knew that there would be something for me to learn, even if the vid is about Bricks. I learned about aria-label attribute for accessibility. Thank you so much.

[@AdoDzeko10]

Thank you very much sir !

[@Tallbloke1976]

Here from Bricks :) Interesting tutorial, thanks!

[@techfairyrina]

I am in process of moving to Bricks. A little bit learning curve :)

[@brucetunkel]

Excellent thanks!

[@DivaldoCarlos06]

Awesome Kevin, thank you for the tutorial. I am from oxygen changing for bricks. Peace

[@crazy4uonly21]

Bricks All Day

[@EduwareIzekor]

Nice break down of the elements :)

[@winwinis3483]

Great tutorial as always

[@rechercheur2011ny]

Hey Kevin, belayed thank you for this marvelous content ! Really exciting and energizing to see you in action 🚀Despite the ACSS promo section at the end 😂. One question: Regarding current versions of Bricks (using 1.10.3): so would you recommend assigning 'grid' to the Bricks container element per default or per case (and leave it as-is)?

[@Gearyco]

Per case

[@maksfischer7477]

Can you please do more videos on general building guidelines and the technical stuff. Also semantically correct building etc. There are a ton of videos showing cool tricks but not enough that go over the fundamentals. For example I know that you once said that a header should semantically not have a section tag, but it would be interesting to know why. Does the same apply for footers? When would you use block elements? There are so many fundamental questions that seem to be ignored by lots of web developers and you really seem to know what you are talking about.

[@Gearyco]

I do these types of videos often. There are many in the inner circle also.

[@ThePresidentMerkin]

Simple elegance here. Can a news/mag aggregator site be developed with Bricks? The ideas being from feed to post. . . with Bricks functioning with an installed news aggregator. Basically, can you drop-in a news feed into a page card inside the Brick template? Thanks.

[@dallaslogic]

26:32 is worth the entire video! 😁🤣

[@ocbroadband]

Great stuff as always Kevin. A great tool that could have been used for this to visually show the boundaries of all the boxes that I use is Hoverify. Not advocating for it, but would be a great tool to really give a visual to your tutorials. I've learned a sh*t ton of stuff from you and continue to do so after watching these. I'm very much in the near future, due in part to your channels(all of them), going to start pursuing business ventures to start building more sites outside of the handful that I do now. Many thanks and will continue to enjoy your content!

[@LeoMerkel]

I come from Elementor and no one has explained me so well the specifics of sections, containers and DIVs in page builders. I used to build websites manually and therefore know Flexbox and CSS Grid in detail - but so far just not in Page Builders,. Great job, Kevin! Question: what is the role of the "Block" element in Bricks then (I know it's also DIV) - the docs don't explain it quite enough.

[@Gearyco]

It’s literally just a div that is set to display flex and width 100% by default.

[@timwolstencroft9705]

Thanks Kevin, great tutorial. I'm new to Bricks and ACSS (from Elementor) - blown away at the possibilities. Do you have any tutorials on Bricks, Jet Engine, and ACSS.

[@Gearyco]

I’ve never used jet engine unfortunately.

[@iqbalmauludy]

Awesome video. I laugh many times but a lot gold there. Happy can watch it, keep awesome, Kevin!

[@Gearyco]

Glad you enjoyed it

[@GeorgeMavrommatisgmattis]

Hello Kevin. Great tutorial! 🌟 The way you explained sections, containers, and divs made everything so much clearer. Loved the examples and practical tips on when to use each element. Thanks for making web development easier to understand! 🙌 Since I'm watching this video 2 years later, when I select the div and type the class owl--, the related classes don't show up in the preview. Have they changed names by any chance?

[@Gearyco]

Owl spacing isn’t needed anymore since gap is widely supported. Use .gap- instead

[@DenGradel]

Thanks, great stuff for newbies like me! On Section you said it "should have default top/bottom padding (which can change) and left/right padding that remains consistent". I did this way (setup top/bottom padding) for Body, but my Header (that I previously made) stretched from top to bottom too, as it consists of "Section" as well and it's padding shouln't be as big as for Body. How to make different Section padding by default between Body and Header?

[@Gearyco]

Convert your header section to a div and use the .pad-header- classes