The screenshot below shows 2 pieces of text (in red rectangles) that I need to extract from the attached html. I was able to do a simple one but this is beyond me at the moment.
The text in the green rectangle is unique in the entire document and therefore can be used as a starting point to find the other 2.
At the bottom is all the html for the "section" element that can be used for this example.
Big thanks for any help I can get.
enter image description here
<section class="details-portlet">
<div data-auto="details-tile-title" class="details-portlet__title ">
<i class="fa fa-book details-portlet__title-icon"></i>
<h3 data-auto="Company Summary">Company Summary</h3>
</div><div>
<div class="details-portlet__columns--seperator">
<div class="details-portlet__col " data-auto="Contact">
<div class="portlet-content details-shared-tile details-shared-tile__main ">
<div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Contact"><i class="fa fa-address-card-o portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data">
<address data-auto="details-contact">
<div data-auto="details-contact-name" style="display: flex; align-items: center;">
<div class="details-shared-tile__main" style="margin-right: 5px;">Alexander Burd</div>
<div>
<div class="edit-icon">
<i class="fa fa-pencil contact-edit-icon" data-auto="edit-contact"></i>
</div>
</div>
</div>Sales Exec, Finance Exec <div class="custom-contact" data-auto="mmdb-email"></div><div class="custom-contact" data-auto="details-custom-contact"></div>
</address>
</div>
</div>
</div><div class="details-portlet__col " data-auto="Address"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Address"><i class="fa fa-map-marker portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data"><address data-auto="details-address"><div class="details-shared-tile__main">1177 West Loop S # 1400</div><div class="details-shared-tile__main">Houston, TX 77027</div><div data-auto="details-address-maplink"><a class="details-shared-tile__link">Map / Street View</a></div></address></div></div></div>
</div><div class="details-portlet__columns--seperator"><div class="details-portlet__col " data-auto="Phone"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title="Phone"><i class="fa fa fa-phone portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data">(713) 961-7777</div></div></div><div class="details-portlet__col " data-auto=" Website"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title=" Website"><i class="fa fa fa-link portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data"><a target="_blank" href="http://713abogado.com" title="713abogado.com">713abogado.com</a></div></div></div></div>
</div><div class="details-portlet__columns company-summary-data"><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Industry-(SIC)" class="details-portlet__data-cat" style="width: 33%;">Industry (SIC)</div><div data-auto="Industry-(SIC)-data" class="details-portlet__col">Attorneys (8111-03)</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Location-Type" class="details-portlet__data-cat" style="width: 33%;">Location Type</div><div data-auto="Location-Type-data" class="details-portlet__col">Single Loc</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Social" class="details-portlet__data-cat" style="width: 33%;">Social</div><div data-auto="Social-data" class="details-portlet__col"><a title="Facebook" href="//www.facebook.com/713abogado" target="_blank"><i class="fa fa-facebook-square social-links__facebook"></i></a></div></div></div></div><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Sales-Volume" class="details-portlet__data-cat" style="width: 33%;">Sales Volume</div><div data-auto="Sales-Volume-data" class="details-portlet__col">$5,094,000</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Employees" class="details-portlet__data-cat" style="width: 33%;">Employees</div><div data-auto="Employees-data" class="details-portlet__col">20</div></div></div></div></div>
</section>
I am trying to use the bootstrap 4 gallery however I am a bit lost I have my carsoul showing just with dummy data at present.
As you will notice the bootstrap carousel identifies each image with a number I need to know how to handle this.
This is the orginal code pen I found
https://codeply.com/go/tBbcVXe1xZ
I tried to setup a dotnetfiddle but was unsure how the models works on the online compiler
https://dotnetfiddle.net/Cc5ahV
I have to account for this on the mini pictures
id="carousel-selector-1" data-slide-to="1"
And this for the large pictures
Where the numbers in both should increase per photo
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
#foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
The model would be
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
Edit 2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
I have tried the following razor but it doesnt produce what i need from the code pen
The above html is produced by the below razor but its not working the next and previous.
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item #active" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-#j" class="selected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>
For anyone else this is what works I just had to do a counter in relation to the loop.
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="#active carousel-item" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item #active">
<a id="carousel-selector-#j" class="#isSelected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>
Good morning, I have a topic for arranging a bar chart using Chart.js with bootstrap 4 alerts. Let me explain, in the following image I show how my elements are somewhat misaligned:
what I'm trying to do is accommodate the alerts that are found at the bottom, to the right of my bar graph.
but for some reason I can't find the way to position them correctly, I show you my html code:
<link rel="stylesheet" href="~/css/BoxInfo.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<strong>Panel de Control</strong> <small>Version 1.0</small>
</div>
<div class="card-body">
<div class="col-md-8">
<canvas id="ChartCitas"></canvas>
</div>
<div class="col">
<div class="alert-wrap">
<div class="alert alert-success">
<i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
</div>
<div class="alert alert-info">
<i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
</div>
<div class="alert alert-warning">
<i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
</div>
<div class="alert alert-danger">
<i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var ctx = document.getElementById("ChartCitas").getContext("2d");
var MyChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
datasets: [{
label: 'Numero de citas',
data: [20, 36, 51, 10, 9, 78, 64, 18, 78, 85, 11, 3],
backgroundColor: [
'rgb(0, 153, 255, 0.5)',
'rgb(163, 0, 204, 0.5)',
'rgb(0, 51, 17, 0.5)',
'rgb(255, 102, 0, 0.5)',
'rgb(179, 179, 0, 0.5)',
'rgb(255, 0, 0, 0.5)',
'rgb(0, 255, 255, 0.5)',
'rgb(204, 51, 0, 0.5)',
'rgb(68, 204, 0, 0.5)',
'rgb(0, 0, 204, 0.5)',
'rgb(102, 0, 102, 0.5)',
'rgb(102, 153, 255, 0.5)'
]
}]
}
});
</script>
In my HTML code, I try to dock the graph as the alerts inside a div class = "row" and in a card both elements. I also tried a FORM-INLINE but still without success
and this is my css code to add style to my alerts:
.alert {
padding: 20px;
transition: all .3s ease;
}
.alert:hover, .alert:focus {
transform: scale(1.04);
-webkit-box-shadow: 0 8px 20px #e8e8e8;
box-shadow: 0 8px 20px #e8e8e8;
}
.alert-wrap {
width: 80%;
margin: 30px auto 0;
/*margin-right: 400px;*/
/*margin-left:1150px;*/
}
.alert .close {
opacity: 0;
transition: opacity .3s ease;
}
.alert:hover .close, .alert:focus .close {
opacity: .2;
}
.alert i {
min-width: 30px;
text-align: center;
}
.alert-success {
background: rgb(214,233,198);
background: linear-gradient(0deg, rgba(214,233,198,1) 0%, rgba(198,233,229,1) 100%);
width: 30%;
height: 100px;
}
.alert-info {
background: rgb(188,232,241);
background: linear-gradient(0deg, rgba(188,232,241,1) 0%, rgba(188,208,241,1) 100%);
width: 30%;
height: 100px;
}
.alert-warning {
background: rgb(250,235,204);
background: linear-gradient(0deg, rgba(250,235,204,1) 0%, rgba(250,227,204,1) 100%);
width: 30%;
height: 100px;
}
.alert-danger {
background: rgb(235,204,209);
background: linear-gradient(0deg, rgba(235,204,209,1) 0%, rgba(235,204,221,0.927608543417367) 100%);
width: 30%;
height: 100px;
}
So it's basically what I try to do, but without having the accommodation I want to get to.
If you need more information and / or any questions I will be aware, thanks
According to Bootstrap's grid system, you have to define a .row around both your .col-md-8 and .col containers. Next, remove the width: 30% styles and everything will work properly, as you will see in this fiddle:
<div class="card-body">
<div class="row">
<div class="col-md-8">
<canvas id="ChartCitas"></canvas>
</div>
<div class="col">
<div class="alert-wrap">
<div class="alert alert-success">
<i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
</div>
<div class="alert alert-info">
<i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
</div>
<div class="alert alert-warning">
<i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
</div>
<div class="alert alert-danger">
<i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
</div>
</div>
</div>
</div>
</div>
If you additionally want to optimized the mobile view, replace your .alert-wrap by a .row and set a <div class="col-6 col-md-12"> around your .alert's as shown in this fiddle:
<div class="card-body">
<div class="row">
<div class="col-md-8 mt-3">
<canvas id="ChartCitas"></canvas>
</div>
<div class="col mt-3">
<div class="row">
<div class="col-6 col-md-12">
<div class="alert alert-success">
<i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
</div>
</div>
<div class="col-6 col-md-12">
<div class="alert alert-info">
<i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
</div>
</div>
<div class="col-6 col-md-12">
<div class="alert alert-warning">
<i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
</div>
</div>
<div class="col-6 col-md-12">
<div class="alert alert-danger">
<i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
</div>
</div>
</div>
</div>
</div>
</div>
Resulting in this mobile view and nearly the same desktop view as above:
I have an HTML table which loads data from the database. When I click on a row a modal pop fetches more content from the database with an option to edit a change on the selected row.
My predicament is how do I populate a drop-down list and select a value saved in the database?
It is easy to bind other controls i.e. Textarea, input boxes etc. My issue is with dropdown lists.
FYI I'm using ASP.NET Web Forms with C# and I fetch the data from the database using jQuery AJAX and a WebService.
Thanx in advance.
I have mixed the presentation with the logic.
I have updated the question here is the js:
$("body").delegate("a.view-link", "click", function (e) {
e.preventDefault();
var requestID = $(this).data("reqid");
$.ajax({
type: "POST",
url: "../helpdeskservice.asmx/GetModalContent",
data: "{'requestID':'" + requestID + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#modalEditCall').html(response.d); //Bind
$('#requestConfirmed').modal('toggle') } });
$('#modalEditCall').modal('toggle')
});
The WebService Method
[WebMethod]
public string GetModalContent(string requestID)
{
try
{
return ViewExtensions.GetCallModal(requestID);
}
catch (Exception ex)
{
throw ex;
}
}
The C# Class I use to build the html
public static string GetCallModal(string requestID)
{
var usrRequestObject = new DBHelpDesk();
var categories = usrRequestObject.GetCategories();
var modalddlCategories = new StringBuilder(String.Empty);
modalddlCategories.Append(#"<select class='custom-select w-100' id='modalddlCategory' required>");
foreach (var category in categories)
{
modalddlCategories.AppendFormat(#"<option value='{0}'>{1}</option>",category.CategoryID,category.Description);
}
modalddlCategories.Append("</select>");
var sb = new StringBuilder(String.Empty);
var userRequest = DBHelpDesk.GetCallByID(requestID);
sb.AppendFormat(#"
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>{0}</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='txtDescription'>Description</label>
<input type='text' class='form-control' id='txtmodalDescription' placeholder='' value='' required>
<div class='invalid-feedback'>
Valid first name is required.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Category</label>
{1}
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Sub-Category</label>
<select class='custom-select w-100' id='modalddlSubCategory' required>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Status</label>
<select class='custom-select w-100' id='modalddlStatus' required>
<option value='0'>Open</option>
<option value='1'>In-Progress</option>
<option value='2'>Awaiting Reply</option>
<option value='3'>Closed</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Request Mode</label>
<select class='custom-select w-100' id='modalddlRequest' required>
<option value='0'>Low</option>
<option value='1'>Medium</option>
<option value='2'>High</option>
<option value='3'>Critical</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 mb-3'>
<label for='cc-name'>Comments</label>
<textarea id='txtmodalEditor' class='form-control'>{3}</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-primary'>Update Call</button>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
", DBHelpDesk.GetUserFullName(userRequest.UserID)
, modalddlCategories
, userRequest.Description
, userRequest.Comments);
return sb.ToString();
}
<div>
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../new/request.aspx">
<span data-feather="file"></span>
New Request
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<div class="row">
<div class="col-md-9 mb-3">
<h2>CALL LOG SHEET</h2>
</div>
<div class="col-md-3 mb-3">
<select class="form-control float-right">
<option>Open</option>
<option>Closed</option>
<option>All</option>
</select>
</div>
</div>
<asp:Literal ID="lblContent" runat="server"></asp:Literal>
</main>
</div>
</div>
<div id="modalEditCall" class="modal" tabindex="-1" role="dialog">
<asp:Literal ID="lblModalContent" runat="server"></asp:Literal>
</div>
Here is the dropdown list
enter image description here
I use bootstrap.my navbar icons jumping down when the window get smaller.when it is too small the menu goes to 3line icon bar.
How I can set my icons to appear in one line in small window?
here is my navbar code,
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="brand-image" alt="" src="../image/fullLogo.png"/>
</a>
</div>
<div class=" col-md-offset-2">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="../MainPages/avayejavid.html" class="header-style">
<i class="fa fa-home li-header-style" aria-hidden="true" ></i>
خانه
</a>
</li>
<li class="dropdown ">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
معرفی <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
بیوگرافی
</li>
<li>
اعضای گروه
</li>
</ul>
</li>
<li>
<a href="../MainPages/gallery.html" class="header-style">
<i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>
گالری
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
ویدئو <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
آموزش
</li>
<li>
تصنیف خوانی
</li>
<li>
ساز و آواز
</li>
</ul>
</li>
<li>
<a href="../MainPages/Articles.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
مقالات
</a>
</li>
<li>
<a href="../MainPages/movie.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
خرید
</a>
</li>
<li>
<a href="#" class="header-style">
<i class="fa fa-comments li-header-style" aria-hidden="true"></i>
تماس با ما
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
and here is my CSS:
.header-style{
padding-top:20px !important;
background-image:url(../images/icon.png);
background-size: 100% 100% !important;
padding-left:40px !important;
padding-right:40px !important;
}
.li-header-style{
color:#ffe766
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
#media (max-width:767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 1px;
margin-left: 1px;
}
}
.navbar-nav li a {
height:80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
.navbar .nav > li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a {
color: #ffe766 !important;
background-color: transparent !important;
border-color: #ffe766 !important;
}
#brand-image
{
height:100px;
}
The problem is the icons are taking up too much space for the designated break-point.
I would advise reading the bootstrap documentation more thoroughly (especially the grid system): http://getbootstrap.com/css/#grid-media-queries
To fix your problem you would need to increase the .navbar breakpoint. This is explained very well here: https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint.
You can also look at this previous answer to help you: Change bootstrap navbar collapse breakpoint without using LESS