در طراحی سایت آنچه که می خواهیم در صفحه ی وب داشته باشیم مانند اسلایدشو ، عکس، منو ، متن و ... 
باید در div class  تعریف شده باشد ،
اما در بوت استرپ از کلاس های پیش تعریف شده ای به نام اسپن برای این موارد استفاده می شود که به توضیح بیشتر می پردازم.
در ابتدا باید بدانیم که بوت استرپ به ۱۲ بخش یا گرید کاملاً وابسته است. 
برای مثال  می خواهید دو ستون مساوی در تگ بادی در index.html ایجاد کنید. 
باید به هر کدام از div ها یک class با نام span6 بدهید.
این کار به بوت استرپ می گوید که باید دو ستون کاملاً مساوی ایجاد کند که در هر ستون ۶ ظرفیت (span) جا بگیرد.
در واقع از آنجایی که بوت استرپ بر پایه دوازده بخش  ایجاد شده است برای ایجاد دو ستون، با کلاسی که به دیوها دادیم تعریف کردیم که هر کدام از دیوها چند بخش را در بر بگیرند.

توضیحی درباره گرید یا بخش:
گرید از تعدادی خطوط عمودی و افقی تشکیل شده که سلول هایی را برای چیدمان متن و قطعات گرافیکی ما ایجاد می کند. آنها کمک می کنند تا به راحتی فاصله ها و محل هایی را برای تیتر، متن، تصاویر و… مشخص کنید.
در زمانی که یک صفحه جدید را باز می کنید شما در حال سعی کردن برای درک محتوا هستید و چشمان شما دیوانه وار و در کسری از ثانیه در بین اجزای صفحه حرکت می کنند. هرچه این زمان کوتاه تر باشد شما حس بهتری پیدا می کنید و اگر این زمان زیاد طولانی باشد ممکن است ادامه این کار برای شما خسته کننده شود. 
در واقع طراحی گرید بیس به کمک شما می آید تا محتوا را در ساختاری منظم و بر پایه اولویت بندی مشخص به مخاطب ارایه دهید.
تا اینجای بحث به اندازه کافی درباره اهمیت طراحی بر پایه گرید ها صحبت شد و بهتر است برویم سراغ روش کار.
می توانید یک گرید برای طراحی تان بسازید و یا از گرید های آماده استفاده کنید. گرید سبب ایجاد یک نظم بصری در طراحی شما می شود و در موارد زیادی به بهبود طراحی شما کمک می کند.
گرید نشان دهنده علاقه طراح به نظم در گرافیک است. در یک گرید واحد های اندازه گیری به صورت بلوک هایی وجود دارند که ستون ها را تشکیل می دهند و به گروه بندی قطعات گرافیکی کمک می کنند. در نهایت شما یک ساختار بصری منسجم خواهید داشت که لزوما شکل ظاهری یکسانی ندارد.طراحی با گرید سبب می شود که توازن و یکپارچگی در سایت شما به وجود بیاید که اعتماد کاربران شما را افزایش می دهد.
 نخستین قدم این است که یک لای اوت اولیه بر اساس گرید ایجاد کنید. با این زیر ساخت گرافیکی می توانید بفهمید که چطوری بلوک های اصلی نوشته و دیگر آیتم های مهم در صفحه شما قرار می گیرند.
برای این که از کدهای بوت استرپ استفاده کنید روی لینک زیر کلیک نمایید.
www.rbootstrap.ir

بیایید صفحه را به ۵ بخش اصلی دسته بندی کنیم.

۱- هدر 
۲- بخش تبلیغات و بازاریابی 
۳- سایدبار سمت چپ 
۴- بخش محتوا 
۵- فوتر

برای طراحی این چنین قالب هایی ، سراغ کدهای زیر می رویم: 
لایه ها یا بخش ها به دوصورت ثابت یا متغیر وجود دارد. 
آنچه که به صورت زیر می باشد به صورت متغیر می باشد :
 برای ساخت یک لایه دو ستونه ساده، از کلاس row و اعداد مناسب برای ستون‌هااستفاده می‌کنیم. 
 از آنجایی که شما از شبکه ۱۲ ستونه استفاده می‌کنید، توجه کنید که مجموع اعداد ستون‌ها باید ۱۲ باشد. 
 اگر در درون این اسپن ها عکس یا نوشته قرار دهیم به اندازه آنچه که در کلاس ها وجود دارد این باکس ها کش می آید.
 برای رویت این باکس می توان به صورت اینلاین یا در سی اس اس یک بک گراوند بدهیم.
 عددهای موجود در اسپن  می تواند عددهای دیگری باشند .
 یا تعداد کلاس های بیشتری در رو داشته باشیم.
 تنها چیزی که باید توجه کرد این است که مجموع این اعداد باید ۱۲ شود. اگر هم از ۱۲ کمتر باشد مشکلی پیش نمی آید ،فقط عرض بخش ها کوچک می شود. ولی باید توجه کرد مجموع این اعداد از ۱۲ بیشتر نشود.

لایه ثابت
برای ایجاد یک لایه با عرض ثابت (می‌تواند پاسخگو نیز باشد) از کد زیر استفاده می‌کنیم.  

.