We Keep Coding

How can I always get the same column size? (Bootstrap)

I'm building a website but I have an issue that I can't fix. I have multiple card with information inside that are in columns and each 4 columns, they switch to another row. The problem is that the number of card can change and it's not always divisible by 4. So at the end, I can have less than 4 columns in a row. And when I have les than 4 columns in a row, the displaying is not the same that when I have 4 columns in a row. I know that it's doing that because I use col-sm bootstrap class. It's the only way that I found that is simply responsive. I also tried to use col-sm-3 but the problem is that the website is no more responsive. (See screenshots) By the ways, I use razor views so I can write C# and HTML.
What the displaying do when I use col-sm: Display col-sm
The displaying that I want: Display col-sm-3
The problem of the col-sm-3: Problem of col-sm-3
This is the code of the displaying of my card:
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 10em;
margin: auto;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
<div class="container-fluid">
<div class="headline">VOITURES COMPACTS</div>
<div class="row">
#foreach (var car in Model.cars)
{
if (counter != 0 && counter % 4 == 0)
{
#:</div>
#:<div class="row">
}
<div class="col-sm-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="#car.ImgPath" alt="Card image cap">
<div class="card-body vehicule-cardbody">
<h2 class="vehicule-name">#car.Name</h2>
</div>
</div>
</div>
counter++;
}
</div>
</div>
Don't try running the code, it will not work because it's a razor view.
Thanks

You should be able to get the layout you want using Bootstrap’s grid system.
Your image for the layout you want is larger than what Bootstrap-4 provides with the container-xl (Bootstap-5 has a container-xxl), but you can create your own xxl container (my example has the max width at 1440px, but you can change that).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: #212121;
color: #fff;
}
h1 {
color: #B8BABD;
}
hr {
width: 10%;
border-top: 5px solid #392A49;
}
.container-xxl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width:1500px) {
.container-xxl {
max-width: 1440px;
}
}
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 100%;
text-align: center;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
</style>
<div class="container-xxl">
<h1 class="text-center mt-5">VOITURES COMPACTS</h1>
<hr>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8F8F/000000.png?text=Blista" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Blista</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FFEE8F/000000.png?text=Dilettante" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Dilettante</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/B0FF8F/000000.png?text=Issi" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Issi</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/8FD2FF/000000.png?text=Panto" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Panto</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/AB8FFF/000000.png?text=Prairie" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Prairie</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8FF4/000000.png?text=Rhapsody" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Rhapsody</h2>
</div>
</div>
</div>
</div>
</div>
My example code is in plain HTML, but you should be able to reverse it to work with Razor.

How can i make the size of the div standard whilst changing the elements inside it to accommodate the div?

I want to make the div a standard size of 330px. But when I do it, the elements in the div will get screwed up.
<div class="col-md-3 m-wthree" style="height:330px;">
<div class="col-m">
<a href="#" data-toggle="modal" data-target="##item.id" class="offer-img">
<img src="#item.productImage" class="img-responsive" alt="" style="width:auto;height:124px;">
<div class="offer"><p><span>Offer</span></p></div>
</a>
<div class="mid-1">
<div class="women">
<h6>#item.productName</h6>
</div>
<div class="mid-2">
<p><label>$#item.productOriginalPrice</label><em class="item_price">$#item.productCurrentPrice</em></p>
<div class="clearfix"></div>
</div>
<div class="add">
<button class="btn btn-danger my-cart-btn my-cart-b " data-id="#item.id" data-name="#item.productName" data-summary="#item.productName" data-price="#item.productCurrentPrice" data-quantity="1" data-image="#item.productImage">Add to Cart</button>
</div>
</div>
</div>
</div>
Problem
With % as height
.m-wthree {
width: 50%;
float: left;
margin-bottom: 2em;
}
.add{
text-align:center;
}
.mid-2 p{
float:left;
font-size:0.9em;
color:#B4B4B4;
}
.mid-2 p em{
font-style:normal;
}
.mid-2 p label{
text-decoration: line-through;
font-weight:400;
margin-right:6px;
}
.mid-2 {
padding: 1em 0;
}
Above is the CSS code for the custom CSS. The CSS all seem ok and does not look like it is affecting anything....

Setting "Active" from carousel in html code

I have a project that contains several views with some "carousel".For example, this is one of the pages with some buttons. p1
and when I click, for example, at the first button "Ver mais" it shows this p2
So far so good! But if I get out of this "window" and click on another button "ver mais", it happens this, that is, the slide doesn't start on the first image.p3
My html code is this(I only post the code from two galleries of images because I have a few and it would become too extensive):
window.onload = function() {
$(document).ready(function() {
$('#data').after('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
}
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
width: 960px;
margin: 40px auto;
}
h2 {
font-size: 21px;
color: #008000;
font-weight: normal;
}
#ancora {
text-align: right;
color: black;
position: absolute;
top: 205px;
right: 200px;
text-decoration: underline;
}
#customers {
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
background-color: black;
color: white;
}
th,
td {
padding: 5px;
text-align: center;
}
.center {
text-align: center;
}
.btn-info {
color: #fff;
background-color: rgba(0, 128, 0, 1);
border-color: rgba(0, 0, 0, .075);
cursor: pointer !important;
}
.btn {
text-align: left;
}
.btn-info:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:active:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:focus {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.container {
width: auto;
height: auto;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
* {
-webkit-box-sizing: content-box;
}
.imagem {
width: 150px;
height: 150px;
object-fit: cover;
}
#data tr {
display: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#data td,
#data th {
border: 1px solid #ddd;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
background-color: black;
color: white;
}
td {
width: 350px;
text-align: center;
}
a:-webkit-any-link {
color: white;
cursor: pointer;
text-decoration: underline;
}
#nav {
margin: 0 auto;
float: none;
display: table;
}
#nav a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
#nav a.active {
background-color: #008000;
color: white;
border: 1px solid #008000;
}
#nav a:hover:not(.active) {
background-color: #ddd;
}
#nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.carousel-control.right {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Projetos de Jardim & Lazer</h2>
<a id="ancora" href="/Home/Index">Página Inicial</a>
<table id="data" style="width:100%">
<tbody>
<tr>
<th></th>
<th><strong>Tipo de relva</strong></th>
<th><strong>Descrição</strong></th>
<th><strong>Localidade</strong></th>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
<td><strong>DOMO® SCALA (PHILI)</strong></td>
<td>Boticas Hotel Art & Spa</td>
<td>Boticas - Vila Real</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Boticas Hotel Art & Spa</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® SCALA (PHILI)
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
<td><strong>DOMO® MONZA</strong></td>
<td>Centro Escolar</td>
<td>Seia - Guarda</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Centro Escolar de Seia</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® MONZA
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Any suggestions? Another question, where do I change the time of transition from an image to another?

How can i apply bootstrap in my website? ASP.NET, C#

I have design a website which working fine regarding to design in desktop pc/laptop screen,but it's not working well in mobile and tablets devices.I'm using "responsive web design tester" google chorme add one to check this.It's middle contents changes.
How can i apply bootstrap in my website??I just include links of bootstrap or change the whole design.I'm beginner,I don't know how to apply "bootstrap".I have installed "Bootstrap" by using “Manage NuGet Package". Here is my solution explore snapshot
Here is my desktop view some content
Here mobile view
Here is my aspx code ,specific part of code in which the content not working well :
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-area">
<h2 class="title">About us</h2>
<span class="line"></span>
<p>
UpSkill blends scientifically approved principles of learning and the best quality content to boost personal learning!
We aim to be the hub of quality education for personal growth and individual learning for a successful career!
</p>
</div>
</div>
</div>
</div>
</section>
<!-- end about -->
<!--Courses Start Here-->
<section id="our-team">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-area">
<h2 class="title">Our Courses</h2>
<span class="line"></span>
<p>Search Courses as you want to study and Learn from our best Team!</p>
</div>
</div>
<div class="col-md-12">
<div class="our-team-content">
<div class="container">
<div class="row">
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\linux.png" alt="linux img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to Linux </p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!-- <div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div> -->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\asp-net.png" alt="asp.net img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to Asp.net</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!--<div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div>-->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\php.png" alt="php img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to PHP</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
<!--<div class="team-member-link">
<a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
</div> -->
</div>
<!-- Start single Course -->
<!-- Start single Course -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-team-member">
<div class="team-member-img">
<img src="assets\images\courses\html.png" alt="html img">
</div>
<div class="team-member-name">
<p style="position: relative; left: 7px; font-size: 25px;">Introduction to HTML5</p>
<span style="position:relative; left:7px">CS250</span>
</div>
<p></p>
</div>
</div>
<!-- Start single Course member -->
</div>
</div>
</div>
</div>
</div>
<br />
<button style="position:relative; left:1170px; color:black; font-size:18px; width:130px; height:60px;">See More</button>
</div>
</div>
</section>
"About" and "Our Courses" also working well in mobile devices,but problem with blow code.
Here is my bootstrap.css code :
.container {
padding-right: .9375rem;
padding-left: .9375rem;
margin-right: auto;
margin-left: auto;
}
.container::after {
display: table;
clear: both;
content: "";
}
#media (min-width: 544px) {
.container {
max-width: 576px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
padding-right: .9375rem;
padding-left: .9375rem;
margin-right: auto;
margin-left: auto;
}
.container-fluid::after {
display: table;
clear: both;
content: "";
}
.row {
margin-right: -.9375rem;
margin-left: -.9375rem;
}
.row::after {
display: table;
clear: both;
content: "";
}
.col-xs-1, .col-xs-2, .col-xs-3,
.col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9,
.col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3,
.col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9,
.col-md-10, .col-md-11,
.col-md-12, .col-lg-1, .col-lg-2,
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9,
.col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3,
.col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7,.col-xl-8, .col-xl-9,
.col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: .9375rem;
padding-left: .9375rem;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
.col-xs-5, .col-xs-6, .col-xs-7,
.col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-1 {
width: 8.333333%;
}
.col-xs-2 {
width: 16.666667%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-4 {
width: 33.333333%;
}
.col-xs-5 {
width: 41.666667%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.333333%;
}
.col-xs-8 {
width: 66.666667%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-10 {
width: 83.333333%;
}
.col-xs-11 {
width: 91.666667%;
}
.col-xs-12 {
width: 100%;
}
How can i apply "Bootstrap" on my website?Which works well in every device.
Thanks..

There's a bit more to bootstrap than just dropping the files in (So you should spend a bit of time learning the basics), but have a look at this section to get your basic html:
http://getbootstrap.com/getting-started/#template
This will link the bootstrap javascript and css. Be sure to add any of your own javascript/css as well.
Then have a look at the overview and grid system at: http://getbootstrap.com/css/
This is how you choose the structure of your site using html as JustLearning mentioned. You'll probably be just putting your images in 1 row spanned across 4 columns.

The page looks bootstrapped to me but it depends on whether you meant you want your images to turn into links or made smaller into icons as that will be a new question. Responsive design is about the page fitting into the device and your page appears to fit although the images have been resized. Plus I don't see any MVC or C# or ASP.net so this is straight forward as it looks like you just have a basic HTML5 site. Here is a good link to get you started: http://docs.asp.net/en/latest/client-side/bootstrap.html

how to put a mic symbol inside a textbox in asp .net [duplicate]

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.
My code is like this:
<div class="container">
<div class="row">
<div class="form-group col-lg-4">
<label class="control-label">Name</label>
<input id="txtName" class="form-control input-sm" />
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I don't want to use input group.
Please suggest an alternate way or alternate html with css.

Here are three different ways to do it:
Here's a working Demo in Fiddle Of All Three
Validation:
You can use native bootstrap validation states (No Custom CSS!):
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Name</label>
<input type="text" class="form-control" id="inputSuccess2"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box
Input Group:
You can use the .input-group class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box
Unstyled Input Group:
You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.
Use a normal input group but add the class input-group-unstyled:
<div class="input-group input-group-unstyled">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Then change the styling with the following css:
.input-group.input-group-unstyled input.form-control {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
Also, these solutions work for any input size

Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.
.input { width: 90%; }
.input-icon {
display: inline-block;
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
color: #000;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
}
EDIT
Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css

<input type="text" name="whatever" id="funkystyling" />
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path/to/icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}

I liked #KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:
css
.input-group.input-group-unstyled-right input.form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
html
<div class="input-group input-group-unstyled-right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control">
<span class="input-group-addon input-group-addon-unstyled">
<i class="fa fa-check"></i>
</span>
</div>

You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.
Here's an example, using Font Awesome for the search icon:
.search-box-container input {
padding: 5px 20px 5px 5px;
}
.search-box-container:after {
content: "\f002";
font-family: FontAwesome;
margin-left: -25px;
margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-box-container">
<input type="text" placeholder="Search..." />
</div>