Trying to change the background color of the Bootstrap accordion title when opened - bootstrap-accordion
I am working on this project and am trying to change the background color of the accordion when it is open. I like that it's flush when it's closed, but do not like the white background when it's open.
I am also trying to change the way the arrows are situated, so that they are in a straighter line.
This is what I have so far:
console.log(1)
$(".accordion-button").click(function(){
console.log(2)
var dest = $(this).attr("data-bs-target");
$(dest)[0].scrollIntoView();
});
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
body {
background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-header:collapse {background-color:black !important;}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
h1 {
font-family: Red Rose;
color: #FEB7EE;
}
h2 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--bootstrap-->
<title>Raspberry Pilot</title>
<!--intro-->
<h1 class="display-1">Raspberry Pi-lot</h1>
<h2 class="display-6">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h1>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body about"><p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.</p></div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
<h3>Raspberry Pi</h3>
<p>Go with models 3 and higher.</p>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
Link to download NOOBS
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Set up your SD card.</h4>
<p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>
Link to download NOOBS
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
<p>Make sure everything is plugged in before turning it on.</p></div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
Link to see what you can do with Python
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item" >
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
g = (0, 255, 0) # Green
b = (0, 0, 0) # Black
# Set up where each colour will display
creeper_pixels = [
g, g, g, g, g, g, g, g,
g, g, g, g, g, g, g, g,
g, b, b, g, g, b, b, g,
g, b, b, g, g, b, b, g,
g, g, g, b, b, g, g, g,
g, g, b, b, b, b, g, g,
g, g, b, b, b, b, g, g,
g, g, b, g, g, b, g, g
]
# Display these colours on the LED matrix
sense.set_pixels(creeper_pixels)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet"/>
<script src="script.js"></script>
</html>
It is quite simple in your file stylesheet.css, add this code
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #FEB7EE;
}
Related
bootstrap 4 collapse only one at a time doesn't work. but works in bootstrap 3
I'm working with bootstrap 4.4.1. My goal is to expand accordion one panel at a time and close other panels which are previously open. I couldn't achieve this. I noticed one more issue, that my goal is achieved when bootstrap 3.3.1 is used. I mean accordion open one panel at a time is working in bootstrap 3.3.1, but not working in 4.4.1. Bootstrap 4.4.1 <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapseOne1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> </div> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> Bootstrap 3.3.1 <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne1"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapseOne1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> Is it feasible to achieve this on bootstrap 4.4.1? Thanks in advance
You need to set data-parent="#accordion1" property to div#collapseOne1, div#collapseTwo1 and div#collapseThree1 instead of your divs with class panel-title. working example on codepen You can also add class="accordion" to your wrapper (div#accordion1) and use cards to style your accordion. Refer to accordions <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne1"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapseOne1" class="panel-collapse collapse show" data-parent="#accordion1"> <div class="panel-body">Body 1</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo1"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo1" class="panel-collapse collapse" data-parent="#accordion1" > <div class="panel-body">Body 2</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-target="#collapseThree1"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree1" class="panel-collapse collapse" data-parent="#accordion1"> <div class="panel-body">Body 3</div> </div> </div> </div> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Any Link in bootstrap 4 modal can not use anymore
I don't know what happened but I build a modal for Shopping-Cart Page. When I try to click the title of Item in modal, and the modal will hide and link can not affect as normal. I don't know why and how to solve it. It makes me so frustrated. My Bootstrap4 Version is 4.1.3 Is this bug caused by this version? Here is my code: <div id="modalCart" class="modal fade" tabindex="-1" role="document"> <div class="modal-dialog bg-light" role="document"> <div class="modal-header"> <h5 class="modal-title text-center"><i class="fas fa-shopping-cart pr-1"></i>購物車</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="fas fa-times"></i> </button> </div> <div class="modal-body"> <form class="form-group"> <div class="media cart-item mt-3 mb-3"> <img class="mr-3" src="img/NOIMAGE.png" style="width: 120px; height: auto;"> <div class="media-body"> <h5 class="mt-0">商品1</h5> <div class="price-group"> <div class="form-inline"> <span class="price mr-1" style="width: 4em;">500元</span> <span class="multiple mr-4"><i class="fas fa-times"></i></span> <div class="input-group mr-2"> <div class="input-group-prepend"> <a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-left"></i></a> </div> <input type="text" class="form-control" value="1" style="width: 5em; text-align: center;"> <div class="input-group-append"> <a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-right"></i></a> </div> </div> <a class="btn btn-danger" href="#"><i class="fas fa-trash-alt"></i></a> </div> </div> </div> </div> </form> </div> <div class="modal-footer text-center"> 關閉購物車 <i class="fas fa-cart-arrow-down pr-1"></i>結帳 </div> </div> </div>
You are missing modal-content level. It should be structured in the following way (schematically): .modal .modal-dialog .modal-content .modal-header .modal-body .modal-footer And you did it like this: .modal .modal-dialog .modal-header .modal-body .modal-footer When you fix html structure everything will work fine.
Bootstrap Horizontal Navbar Toggle
I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?
This is my navbar and codepen.io: vertical toggle
body {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="nav-brand" href="#">
<img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"</span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">ABOUT<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link " href="#">PORTFOLIO</a>
<a class="nav-item nav-link " href="#">CONTACT</a>
</div>
</div>
</nav>
This is as I want but I couldn't figured out with source code: horizontal toggle
It's fairly simple to do that. Bootstrap has flex class options, so there's no need to create your own code. Simply change: <div class="navbar-nav ml-auto"> To: <div class="navbar-nav flex-row ml-md-auto d-md-flex"> Also make sure to add p-2 to your nav-item that will give you some padding space between the elements. That makes your code look like this: <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a class="nav-brand" href="#"> <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav"> <span class="navbar-toggler-icon"</span> </button> <div class="collapse navbar-collapse" id="mainNav"> <div class="navbar-nav flex-row ml-md-auto d-md-flex"> <a class="nav-item nav-link p-2 active" href="#">ABOUT<span class="sr-only">(current)</span></a> <a class="nav-item nav-link p-2" href="#">PORTFOLIO</a> <a class="nav-item nav-link p-2" href="#">CONTACT</a> </div> </div> </nav>
Bootstrap 4 Beta - Applying a background-image to Jumbotron breaks a Form element
I was creating a bootstrap website as a challenge when I encountered a problem which I can't find a fix for.
In the jumbotron I have a form with a textfield and a submit button.
The textfield also has an addon (input-group-addon)
Without any images The addon is placed perfectly where it should be but When I add an image the Addon moves away a pixel from the text field.
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Bootstrap 4, still in beta release, applies a highly-transparent border for the .form-control class. Your example highlights how this may produce unexpected results when using an input element against a container with a dark background. Bootstrap 4's default style is this:
.form-control {
border-color: rgba(0, 0, 0, 0.15);
}
That's a black border with near-maximum transparency. Rendering that over a dark background will not achieve the expected look, as you've discovered.
I've appended a custom class to override Bootstrap 4's default border-color for the .form-control class. Applied to your example, it's in effect only when the class .bg has also been applied to the jumbotron.
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Kendo MVVM binding 2 source in same remote template
I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There are 2 source binding. Only 1st works i.e Segment . i dont know why . Even if you use <label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label> still result would be same. if i comment <div data-bind="source: Segment"></div> then 2nd line works Please tell what would be correct way Note: ALL below code is in 1 file. <script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <div> <div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div> <div style="text-align:center;"> <button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;"> <i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save </button> <button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button> </div> </div> </script> <script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <div data-bind="source: Segment" data-template="SegmentTemplate"></div> <div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div> </script> <script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <label data-bind="text: SegmentDetailsToDisplayPricing"></label> </script> <script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <div> <label data-bind="text: Pax.PersonName"></label> <input data-role="dropdownlist" data-text-field="PassportNumber" data-value-field="PassportNumberID" data-bind="source: PossiblePassports" /> <input data-role="dropdownlist" data-text-field="FrequentFlyernumber" data-value-field="FrequentFlyernumberID" data-bind="source: PossibleFrequentFlyers" /> </div> </script>
I think you must to divide your template because you have two different type a list and a single item. <script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <div> <div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div> <div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate_Second"></div> <div style="text-align:center;"> <button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;"> <i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save </button> <button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button> </div> </div> </script> <script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate"> <div data-bind="source: Segment" data-template="SegmentTemplate"></div> </script> <script id="PaxPreferenceTemplate_Second" type="text/x-kendo-template" class="KendoExtTemplate"> <div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div> </script>