Align and center in bootstrap collumns

HTML & CSS
1

Hello guys,
So…I’m trying to make a header using bootstrap grid system(collumns and rows).I’m a beginner with html and css,so if you have any suggestion,just tell me!
First problem:
I have the navbar in a col-lg-4 and i’m trying to center it,but it’s not working.HTML:

<div class="row header_details">
<div class="col-lg-1 col-1 logo">
                        <a href="#"><img class="img-fluid" id="logo-img" src="http://www.designyourway.net/blog/wp-content/uploads/2017/10/kitchen_table_seal_logo.jpg"/></a>
                </div>
                <div class="col-lg-4 offset-lg-1 col-4 menu">
                    <div class="bottom-menu">
                        <nav>
                            <ul>
                                <li><a href="#">Acasa</a></li>
                                <li><a href="#">Meniu</a></li>
                                <li><a href="#">Poze</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
</div>

Problem number 2: After that,i want to have 4 icons at the bottom of the row,so i’ve made another row(in the main row),i’ve made the collumns,but i can’t place them at the bottom of the row.HTML:

<div class="col-lg-4 offset-lg-2 col-4 order-details">
                    <div class="row">
                            <div class="col-lg-3 detail-item">
                                icon 1
                            </div>
                            <div class="col-lg-3 detail-item">
                                icon 2
                            </div>
                            <div class="col-lg-3 detail-item">
                                icon 3
                            </div>
                            <div class="col-lg-3 detail-item">
                                icon 4
                            </div>
                    </div>
                </div>

MENTION:The second html is in the same row as the first html.

2

First, take a formal class and learn basic HTML and CSS. Practice with it for awhile before giving yourself to Bootstrap which offers the appeal of being able to create a web site without knowing HTML and CSS… but here your are. :slight_smile:

Have you read the Bootstrap documentation thoroughly?

2 Likes
3

The code you posted doesn’t really help with your question as it doesn’t seem to produce anything legible (even when I link to the boostrap3 CDNs).

Your logo is housed in a column that is 8% wide yet your logo is 700px wide and therefore overflows the container.

I have no idea what you mean but if that html is supposed to be inside the other html then it would have helped if you’d posted the actual code in whole.:wink:

It would be better if you posted your working version which you can do on codepen quite easily which will show exactly what you are seeing. You can link to all the bootstrap files from codepen quite easily.

Then we’d need to see a drawing of what you are trying to achieve to give hints on how to accomplish this with or without bootstrap.

Take some time to read the bootstrap documentation and look at all their examples to see how they are constructed. They have various navbar examples around. Although bootstrap is a framework it still requires some knowledge of CSS and html in order to bend it to your will. If you are an absolute beginner then the best you can do is take their demo templates and use them without much modification.

It is often harder using boostrap to create ‘special designs’ (designs that don’t fit neatly into a grid structure) than it would be to have used normal css and html in the first place.:slight_smile:

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.