Since the .page-header class has been deprecated in Bootstrap 4, how can someone create a page header with the same style as Bootstrap 3 .page-header class?
According to the migration docs, the Bootstrap 4 utility classes should be used instead:
<div class="pb-2 mt-4 mb-2 border-bottom">
Page header
</div>
https://codeply.com/go/20jBKvMkHx
pb-2 - padding bottom 2 spacer units
mt-4 - margin top 4 spacer units
mb-2 - margin bottom 2 spacer units
border-bottom - border-bottom: 1px solid rgb(222, 226, 230)
To my understanding, there isn't a direct replacement in bootstrap 4 for the bootstrap 3 .page-header.
However the CSS for the bootstrap 3 .page-header is simply:
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
So you could create your own class in your css file:
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
Related
I work on Nuxt.js (Vue.js) application that uses BootstrapVue (Bootstrap based) package.
The current situation is as following:
The code looks as following:
<template lang="pug">
b-container
b-row
b-col(:cols="8")
b-container
b-row
b-list-group
b-list-group-item.flex-column.align-items-start(
v-for="(item, index) in 7" :key="index"
href='#'
)
b-container
b-row
b-col(:cols="1").d-flex.align-items-center.justify-content-center
b-form-checkbox {{ index + 1 }}
b-col(:cols="11")
basket-item(:itemNumber="index + 1" :checkStatus="accepted")
b-row.style-row-middle
b-button.close(type='button' aria-label='Close' #click="onClose()")
span(aria-hidden='true') ×
u Удалить выбранное
b-button(type='button' #click="onContinue()").btn.btn-lg.buy__button Продолжить покупки
b-row
div
hr
| * доставка будет осуществлена из Санкт-Петербурга;
br
| * наш менеджер свяжется с вами сразу после обработки заказа;
b-col(:cols="4" class="col2")
form(ref='form' #submit.stop.prevent='handleSubmit').set-padding
div
strong
label ЗАКАЗ
div
strong
label Всего товаров: 1
div
strong
label На суму: 100 000 р
b-form-group(label='')
b-form-group(label='Телефон' label-for='type-tel' invalid-feedback='Phone is required')
b-form-input(id="type-tel" type="tel" v-model='phone' required)
b-form-group(label='E-mail' label-for='type-email' invalid-feedback='E-mail is required')
b-form-input(id="type-email" type="email" v-model='email' required)
b-form-group(label='Ваше имя' label-for='name-input' invalid-feedback='Name is required' :state='nameState')
b-form-input(:id="name-input" v-model='name' :state='nameState')
div.d-flex.align-items-center.justify-content-center
b-button(type='submit' variant='primary' size="lg") Оформить заказ
</template>
<style lang="sass">
.list-group
margin-bottom: 10px
max-height: 400px
-webkit-overflow-scrolling: touch
overflow-y: auto
.list-group-item
border-style: none
.set-padding
padding-bottom: 7px
padding-top: 7px
.style-row
border: solid 1px black
display: flex
justify-content: space-between
.style-row-middle
display: flex
justify-content: space-between
padding: 4px
.col1
border: 1px solid red
.col2
border: 10px solid rgb(0, 70, 140)
.buy__button
background-color: #eee
background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
border: 1px solid #cccccc
color: black
font-size: 16px
text-shadow: 0.5px 0.866px 0 white
.set-border
border: 1px solid gray
border-radius: 3px
margin-bottom: 2px
margin-top: 2px
</style>
I need to stretch product's rows to maximum, but I'm not sure how to do it.
The screenshot shows padding in .list-group-item that could be reduced to 2px:
.list-group-item
padding: 2px
Also, .list-group should take the full width available in the row:
.list-group
width: 100%
demo
I am having trouble with this Github package for vuejs pagination. It seem to work on bootstrap 3 but when I use bootstrap 4, it just doesn't work. My problem basically is that bootstrap 4 doesn't style the list item correctly.
I put 'pagination' class on :container-class and it makes the list inline, but not style it like what a normal bootstrap pagination should look. It's just plain list that is inline. I even tried overriding it and putting my own 'mypagination' class on :container-class but still doesn't style it properly. Thanks in advance to you.
//VueJs Paginate code
<paginate
:page-count="20"
:click-handler="functionName"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'mypagination'">
</paginate>
//My style code
<style scoped>
.mypagination{
list-style-type: none;
}
.mypagination li {
display: inline !important;
}
.mypagination > li > a,
.mypagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
</style>
You have to add the following properties for bootstrap 4:
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:prev-class="'page-item'"
:next-class="'page-item'"
:prev-link-class="'page-link'"
:next-link-class="'page-link'"
:active-class="'active'">
</paginate>
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
I am using twitter bootstrap 3 with horizontal forms and form groups in my ASP.Net MVC razor app:
<form action="SomeAction" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-lg-3 control-label">
#* label *#
</div>
<div class="col-lg-9">
#* textbox *#
#* validation *#
</div>
</div>
I also have the following in my layout template because every view will be a form and I don't want to have to style every control or view separately:
$('input[type=text]').addClass('form-control');
With text inputs, this is what I get:
The first 1-2 characters are hidden until I click in the control, which then shows them:
I am using IE 10. It doesn't happen in google chrome:
Not sure how to resolve this so any help is appreciated
I found out what was causing it. I have the following javascript in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
Once I removed it and applied the class in the control it rendered properly:
#Html.TextBoxFor(model => model.Manufacturer, new { style = "width: 400px;", #maxlength="50", #class = "form-control" })
Text inputs seem to be the only one with this problem. textarea and select don't have the same behavior.
I wanted to avoid having to put the bootstrap class in every single control in every single view. If anyone knows of a better way please let me know.
Update
It turns out the padding style (12px) in the bootstrap.css (version 3.0.0, line 1712) is causing the problem:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px; /* this line is causing the problem */
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
Hate to alter the bootstrap css. I am overriding it temporarily in my _Layout.cshtml view:
$('input[type=text]').addClass('form-control');
$('input[type=text]').css('padding', '6px 0');
When using a rounded border on an image, webkit browsers hide the border behind the image
CSS
img {
border: 10px solid #000;
border-radius: 100%;
}
HTML
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
Bug reproduced # http://jsfiddle.net/zPpVm/
This is probably related to this Webkit bug, but I cannot find a suitable work around.
A possible workaround is to use a box-shadow:
box-shadow: 0 0 0 10px black;
Live Example
The main problem: It won't be calculated in the box-model
As another workaround, you can wrap your image like this:
<span class="img_container" >
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
</span>
Than style elements:
.img_container {
border: 10px solid #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
}
.img_container img {
display: block;
}
All modern browsers except Opera will render it correctly.