bootstrap 3 have two buttons aligned in the same row - html

i have the following html code, and i use bootstrap 3. What i try to achieve is to have the 4 buttons with the klasse text, be the first two in the same row, and the next two, in the next row. Now each button is shown in its own row.
How the below code should be altered?
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center"><a class="button" href="http://site/">klasse 1</a><a class="button" href="http://site">klasse 2</a><a class="button" href="http://site/">klasse 3</a><a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem with all suggested solutions, is that when i use the following drupal theme button class, it does not force buttons to be on the same row, when i have for instance text as large as the following in all buttons:
Use Bootstrap’s custom button styles for actions in forms...
https://www.drupal.org/project/showcase_lite


you need something like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 1</a>
<a class="btn btn-primary" href="http://site">klasse 2</a>
</div>
<br>
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 3</a>
<a class="btn btn-primary" href="http://site/">klasse 4</a>
</div>
</div>


Not sure if it is what you would like to achieve, please let me know, if not I'll give you more solutions:
Basically I have deleted button klasse3 & klasse4 from the "p class text-center" and I have added them into another "p class text-center" below.
This is a simple solution, but I think you could achieve a better result with a different solution
Actual Button
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 1</a>
<a class="btn btn-default" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 3</a>
<a class="btn btn-default" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Plain text
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="button" href="http://site/">klasse 1</a>
<a class="button" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="button" href="http://site/">klasse 3</a>
<a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Bootstrap 4 row breaks for no reason

I know there have already been questions on this subject, but none of the solutions I found here were helpful. Hopefully someone can help me here:
I have a row with 4 columns of data as follows:
Here is the code:
<hr class="mb-4">
<div>
<h3>{{ player.full_name }}</h3>
<h4> {{ player.position }}</h4>
<h5> {{ player.team }}</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
{{ player.form }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>{{ player.price }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
{{ player.total_points }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
{{ player.tsb }}%
</div>
</div>
</div>
As far as I understand, the 4 columns should keep in one row even in smaller screen, especially as there is definitely enough space to show them all together. On small screens this is what I get:
Nothing I change seem to help in this matter. I would like all columns to be shown in the same row even on smaller screens. Appreciate your help
Edit
The source of the problem is in the of my page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
</head>
So the problem is when using the Bootstrap 4 tag instead of Bootstrap 3 like in the example below. Is that by design?

if you want it to be in 4 columns at any device width, just use the class col-3 instead col-xs-3 col-sm-3

I can't seem to reproduce this on my end. My guess is there's some difference in your CSS somewhere:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<hr class="mb-4">
<div>
<h3>Mohamed Salah</h3>
<h4>Midfielder</h4>
<h5>Liverpool</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
7.5
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>12.8
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
165
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
45.3%
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
test it out and see:
https://codepen.io/davidgbiggs/pen/JjdXpGq

Bootstrap 4 modal is not working after triggering

I have a bootstrap modal and it is not showing
I've tried using different cdns, reusing code from the internet but nothing worked. When I try some other bootstrap cdn is messing up my css and everything goes wrong. Can somebody please tell me how and what to do.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
<a data-toggle="modal" data-target="#myModal" href="#myModal">
<div class="col-xs-3 cards-item cardTipove">
<div class="cardsHeading">
<h2>ТИПОВЕ</h2>
</div>
</div>
</a>
</body>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<a href="projector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardProjector">
<div class="cardsHeading">
<h2>ПРОЖЕКТОР</h2>
</div>
</div>
</a>
<a href="generator.html" class="cardsLink">
<div class="col-xs-3 cards-item cardGenerator">
<div class="cardsHeading">
<h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
</div>
</div>
</a>
<a href="manifestor.html" class="cardsLink">
<div class="col-xs-3 cards-item cardManifestor">
<div class="cardsHeading">
<h2>МАНИФЕСТОР</h2>
</div>
</div>
</a>
<a href="reflector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardReflector">
<div class="cardsHeading">
<h2>РЕФЛЕКТОР</h2>
</div>
</div>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
it must show my modal, but nothing happens

You need to include the boostrap.js file
<head>
....
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
https://jsfiddle.net/bzon481d/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="image/icons/h2d_color.ico" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/b9f85d60dc.js" crossorigin="anonymous"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<a data-toggle="modal" data-target="#myModal" href="#myModal">
<div class="col-xs-3 cards-item cardTipove">
<div class="cardsHeading">
<h2>ТИПОВЕ</h2>
</div>
</div>
</a>
</body>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<a href="projector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardProjector">
<div class="cardsHeading">
<h2>ПРОЖЕКТОР</h2>
</div>
</div>
</a>
<a href="generator.html" class="cardsLink">
<div class="col-xs-3 cards-item cardGenerator">
<div class="cardsHeading">
<h2>ГЕНЕРАТОР/МАНИФЕСТИРАЩ ГЕНЕРАТОР</h2>
</div>
</div>
</a>
<a href="manifestor.html" class="cardsLink">
<div class="col-xs-3 cards-item cardManifestor">
<div class="cardsHeading">
<h2>МАНИФЕСТОР</h2>
</div>
</div>
</a>
<a href="reflector.html" class="cardsLink">
<div class="col-xs-3 cards-item cardReflector">
<div class="cardsHeading">
<h2>РЕФЛЕКТОР</h2>
</div>
</div>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

ASP.NET MVC multiple layouts

im trying to use multiple layouts for each different page using ASP.NET MVC. Default connection of Routing config works fine as you can see Index Screenshot. If i make register page as default connection it also works without any problems.
However, when accessing register page from Index by clicking button above, CSS seems to be not readen as you can see Register Screenshot.
Kayit_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kayitol :: #ViewBag.Title</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="assets/css/Brands.css">
<link rel="stylesheet" href="assets/css/Features-Boxed.css">
<link rel="stylesheet" href="assets/css/Footer-Clean.css">
<link rel="stylesheet" href="assets/css/Highlight-Blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/Map-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
<link rel="stylesheet" href="assets/css/Registration-Form-with-Photo.css">
<link rel="stylesheet" href="assets/css/Simple-Slider.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/Team-with-rotating-cards.css">
</head>
<body>
<nav class="navbar navbar-default navigation-clean" style="font-family:Ubuntu, sans-serif;font-size:18px;">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#"> <img class="img-responsive" src="assets/img/logo_resized.png" style="width:210px;height:61px;"></a><button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" style="padding:34px;">
<li role="presentation">Aramıza katıl</li>
<li role="presentation">Giriş </li>
</ul>
</div>
</div>
</nav>
<div data-bs-parallax-bg="true" class="register-photo" style="background-image:url(assets/img/White-Background-647.jpg);background-position:center;background-size:cover;">
<div class="form-container">
<form method="post">
<h2 class="text-center"><strong>Hemen</strong> bir hesap yaratın.</h2>
<div class="form-group"><input class="form-control input-sm" type="email" name="kullanici_adi" required="" placeholder="Kullanıcı adı" autofocus=""></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_isim" placeholder="İsim"></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_soyad" placeholder="Soyad"></div>
<div class="form-group"><input class="form-control" type="date" name="kullanici_dogumtarihi"></div>
<div class="form-group"><input class="form-control" type="email" name="email" required="" placeholder="Email"></div>
<div class="form-group"><input class="form-control" type="password" name="password" required="" placeholder="Şifre"></div>
<div class="form-group"><input class="form-control" type="password" name="password-repeat" required="" placeholder="Şifre (tekrar)"></div>
<div class="form-group">
<div class="checkbox"><label class="control-label"><input type="checkbox">Kuralları okudum ve kabul ediyorum.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit" style="background-color:rgba(0,102,127,0.72);">Üye ol</button></div>Zaten hesabınız var mı? Hemen giriş yapın.
</form>
</div>
</div>
<div class="footer-clean">
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 item">
<h3>İletişim </h3>
<ul>
<li>E-mail: info#birsorumvar.com</li>
<li>Telefon: +90 232 224 40 08 </li>
<li>Online müşteri hizmetleri</li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Hakkımızda </h3>
<ul>
<li>birsorumvar.com </li>
<li>Takım </li>
<li>S.S.S </li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Bizimle çalışın</h3>
<ul>
<li>Açık pozisyonlar</li>
</ul>
</div>
<div class="col-md-3 item social">
<i class="icon ion-social-facebook"></i><i class="icon ion-social-twitter"></i><i class="icon ion-social-snapchat"></i><i class="icon ion-social-instagram"></i>
<p class="copyright">birsorumvar © 2018</p>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider.js"></script>
#RenderBody()
</body>
</html>
Kayitol.cshtml
#{
ViewBag.Title = "Kayitol";
Layout = "~/Views/Shared/Kayit_Layout.cshtml";
}
KayitController.cs
public class KayitController : Controller
{
// GET: Kayit
public ActionResult Kayitol()
{
return View();
}
}
}

Obviously, the relative path of css files can't be found. (The browser tries to find them with ...kayit/kayitol/assets/...) You should navigate root the relative paths by starts with /
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
Also, I suggest you to use Bundles to import static css and js files.
bundles.Add(new StyleBundle("~/assets/css").Include(
"~/assets/bootstrap/css/bootstrap.min.css");

Bootstrap grid 3 column layout doesn't work

I think I looked everywhere and tried everything.
I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other.
HTML code:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
Any reason why? Thanks in advance.

The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.
Please make sure that you have the following included in the section of your document.
<head>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen example: https://codepen.io/CapySloth/pen/gRGNxa

Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<img src="img/instagram.png"/>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<img src="img/facebook.png"/>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png"/>
</div>
</div>
</div>
</div>

1st:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
Should be
<img src="img/instagram.png">
For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))
3rd: could be your reference not setup properly. try those:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<img src="img/instagram.png">
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<img src="img/facebook.png">
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png">
</div>
</div>
</div>
</div>

Bootstrap alertinfo getting merged with button in header

I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here

use display: inline-block and width: 100%; on alert-info div it will work fine that you want.

UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
Code:
<!DOCTYPE html>
<html lang="en">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.

Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>