Hello friend plz tell me how to create this part in bootstrap?

HTML & CSS
1

1183×326 37.6 KB

2

What have you tried so far?

Where is the code you are using and what parts of the design are you having trouble with? Is it the menu or are you trying to code some sort of JS slider from scratch? or is that just an image?

Do you know bootstrap? Have you read through and studied the documentation in enough detail to use it properly.?

Which version of bootstrap are you using?

As you see from the above that until you show what approaches you have taken and examples of the code so far then there is little we can do to help. We are here to help you learn not do your work for you :slight_smile:

2 Likes
3

i m using bootstrap 7.3 version

4

i m only want this part plz help me

<div class="port">
                    	<div class="container">
                        	<div class="row">
                            	<ul class="nav navbar-nav">
                                	 <li><a href="#" class="selected" data-filter="*">All</a></li>
                            <li><a href="#" class="" data-filter=".solid">Solid</a></li>
                            <li><a href="#" class="" data-filter=".design">Design</a></li>
                            <li><a href="#" class="" data-filter=".print">Print</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

.port li a{
	margin:6px 12px;
	padding-bottom:4px;
	font-size:12px;
	line-height:1.2;
	color:#888;
	font-weight:bold;
	letter-spacing:0.1px;
	width:auto;
	text-align:center;
}

i m use this code

5

Are you from the future?

Bootstrap 4 is the latest we have :slight_smile:

3 Likes
6

Assuming you meant bootstrap 3.3. then you could approach it like this.


.port ul{background:#ccc;text-align:center;float:none}
.port li {float:none;display:inline-block}
.port li a{
	margin:6px 12px;
	display:block;
	padding:4px 12px;
	font-size:12px;
	line-height:1.2;
	color:#888;
	font-weight:bold;
	letter-spacing:0.1px;
	width:auto;
	text-align:center;
}

<div class="port">
  <div class="container">
    <div class="row">
      <ul class="nav col-md-12">
        <li><a href="#" class="selected" data-filter="*">All</a></li>
        <li><a href="#" class="" data-filter=".solid">Solid</a></li>
        <li><a href="#" class="" data-filter=".design">Design</a></li>
        <li><a href="#" class="" data-filter=".print">Print</a></li>
      </ul>
    </div>
  </div>
</div>

The correct approach according to bootstrap documentation would be to use offset columns to move a column to the centre. You need to brush up on the bootstrap documentation but also do not neglect your normal css skills.

Bootstrap is really overkill for something as simple as a centred menu which can be done much easier in basic css :slight_smile:

1 Like
7

oho sorry really it’s my mistake i m use bootstrap 3 sorry really sorry

9

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