How To Scroll Nav-pills (bootstrap 3) Horizontally?

I am using the new Bootstrap 3 for nav-pills and I want to make all the pills stay in one horizontal line that can be scrolled (no wrap, even in title of every pill). even for 3 pi

Solution 1:

Replace following css with your css. & then check it.

.singledowre {
    background-color: transparent;
    min-height: 100%;
    padding: 40px14px;
    background-image: url(img/shapes.png) !important;
    background-size: 17%;
}
.singledowrediv {
    display: table;
    margin: 0 auto;
    max-width: 950px;
}
.singleinfos {
    background: white;
    padding: 10px;
    border-radius: 8px;
    margin: 15px0;
}
.container-fluid {
    padding-right: 0!important;
    padding-left: 0!important;
    margin-right: 0!important;
    margin-left: 0!important;
}
.singleinfos.singleinfostabs {
    margin-bottom: 20px;
	width: 100%;
}
.singleinfos.singleinfostabs > ul {
     overflow-x: auto;
   overflow-y:hidden;
   flex-wrap: nowrap;
    margin-bottom: 14px;
}
.singleinfos.singleinfostabs > ul > li {
    background: white;
    background: #869daf;
    border-radius: 3px;
    padding: 12px0;

    margin-left: 10px;
    margin-right: 0;
    margin-bottom: 20px;
}
.singleinfos.singleinfostabs.nav-pills > li > a {
    font-size: 13px;
    border-radius: 4px;
    padding: 4px10px;
    text-align: center;
    background: transparent;
    color: white !important;
	white-space: nowrap !important;
}

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"><divclass="singleinfos"><divclass="row container-fluid "><divclass="singleinfostabs"><ulclass="nav nav-pills"><liclass="active"><adata-toggle="pill"class="moretab"href="#cootab11">سرفصل های دوره</a></li><li><adata-toggle="pill"class="moretab"href="#cootab12">نمونه های دوره</a></li><li><adata-toggle="pill"class="moretab"href="#cootab13">توضیحات بیشتر</a></li><li><adata-toggle="pill"class="moretab"href="#cootab13">توضیحات بیشتر</a></li><li><adata-toggle="pill"class="moretab"href="#cootab13">توضیحات بیشتر</a></li><li><adata-toggle="pill"class="moretab"href="#cootab13">توضیحات بیشتر</a></li><li><adata-toggle="pill"class="moretab"href="#cootab13">توضیحات بیشتر</a></li></ul></div><divclass="tab-content"><divid="cootab11"class="tab-pane fade in active sarfasldowre"> Text One </div><divid="cootab12"class="tab-pane fade"> Text Two </div><divid="cootab13"class="tab-pane fade"> Text Three </div></div></div></div>