Where to put <section> element in Bootstrap?

HTML-CSS
#1

Hi! I’m new to FCC and so hopefully I’m posting this in the write place.

I was looking for guidance on setting up different sections of a page, particularly while doing portfolio project.

I wanted to use the section element for the various sections of the page. Am I using the correct order of elements? I wasn’t sure if section should open after row and where to close the /section.

`<section> Name of section
        <div class="row">
            <div class="col-xs-6">
            </div>
            <div class="col-xs-6">
            </div>
        </div>
        <div class="row">
        </div>  
</section>`
#2

Hey Mike,

You can definitely use the HTML section tag like that. The only thing I would recommend doing is to bring the “name of section” part into one of the bootstrap divs. That way your HTML sections are still differentiated, but you’ll be able to take advantage of the bootstrap styling capabilities.

<section> 
    <div class="row">
        <div class="col-xs-12">Name of Section</div>
    </div>
    <div class=row">
        <div class="col-xs-6">
        </div>
        <div class="col-xs-6">
        </div>
    </div>
    <div class="row">
    </div>  </section>

`

1 Like
#3

You can also do something like this.

<section id="header"> Name of section
	<div class="container">
		<div class="row">
			<div class="col-xs-12"></div>
		</div>
	</div> 
</section>

<section id="main-content"> Name of section
	<div class="container">
		<div class="row">
			<div class="col-xs-6"></div>
			<div class="col-xs-6"></div>
		</div>
	</div> 
</section>

<section id="footer"> Name of section
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-4"></div>
			<div class="col-xs-4"></div>
			<div class="col-xs-4"></div>
		</div>
	</div> 
</section>
2 Likes
#4

And for those of us who need pictures to learn stuff.

This is the general html5 layout (a simple layout) showing where you’d use the semantic tags such as section.

2 Likes
#5

hi all, can i put a section in the section?

Example: