I write these code and made 2 grid using bootstrap.Now i want to the backgound image in the wrapper class.I tried it but i din't get success. Any idea about this?
.wrapper {
background-image: url(http://www.steamatic.com/images/footer-pattern-grey.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrapper">
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-home fa-3x"></i></div>
<div class="media-body">
<h4>Resenditial Services</h4>
</div>
</div>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-building fa-3x"></i></div>
<div class="media-body">
<h4>Commercial Services</h4>
</div>
</div>
<p class="para">We've been providing commercial clients money-saving and asset-protecting services for nearly five decades. Steamatic's full range of restoration and cleaning services means we have your business covered.</p>
</div>
</div>
I get the image in my background but i want to get full width image what i do?
U can show the image i upload
If you read the documentation of bootstrap, the cols are always wrapped in a row , if you want to wrap it in your own .wrapper class, then add
.wrapper{
overflow: hidden;
}
or you can try float: left; to .wrapper , its your choice
Add overflow: auto; to your .wrapper element.
You have to add overflow: hidden to your .wrapper class parent element of the two floating elements inside of it. So that if you add background image on your .wrapper it will show. Because, bootstrap grid classes are using float.
Related
Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.
HTML/Bootstrap:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
CSS:
.align_text {
vertical-align: middle;
}
Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)
img {
background: gray;
height: 250px;
display: block;
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-9 justify_text">
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and
friendly access to health, wellness and beauty.”</p>
</div>
</div>
</div>
I believe this produces what you ask for. It is using 2 flexboxes:
First one (.row) to put the image and text next to each other in a responsive way;
Second one (.col-md-9) to position the span in the center
html,
body {
width: 100%;
}
.row {
display: flex;
width: 100%;
}
.row>* {
flex: 1; /* Allow the flex items to grow and shrink */
}
.col-md-9 {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
</div>
<div class="col-md-9">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height
.align_text {
vertical-align: middle;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="http://placekitten.com/1000/500" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text align-self-center">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
Been reading about general answers for this for a while. As often as I have tried to play with it, I just cannot get the CSS to work and fit on my timeline.
I am using this theme. I have been trying to replace the about section timeline with pictures of my own but the pictures I have used are all different sizes. I just can't seem to get even one of my images to fit the fun little circle that the originals were in and trust me it has been a long time. Any help is REALLY appreciated. I'll put the code I have below but I know some of it repeats itself because like I said, I have been trying to fix these images for a while. I've tried to make different CSS rules for each individual image but I have failed on that part as well. Seriously any help is appreciated.
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Build or Scale your HR Capability</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Properly staffed and positioned Human Resources leaders and teams are strategic enablers of business performance and growth. We help you assess your current HR capabilities and build value adding talent management solutions that will help you move beyond compliance driven personnel management to business integrated Human Resources leadership.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Develop your Leaders</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Effective leadership is critical to attracting, engaging, and retaining the people you need to delight your customers and achieve your goals. We help you leverage the strengths of your managers and create insights and actions to develop their weaknesses through individualized feedback and coaching.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="img-circle img-responsive1" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Focus and Engage your Team</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The most successful businesses have team members that understand the company's goals and are committed to achieving them. We help you create clarity of purpose and establish goal setting and performance management tools and processes that go beyond score keeping to create a culture of engagement. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part
<br>Of Our
<br>Story!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
and the css for the images
element {
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
max-width: 50%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Important to note, I think checking the link earlier would really help me. There are a series of CSS rules that also are extended onto the image as you can see from the HTML like timeline-image which I can also put here but I figured my question was long enough.
Thanks for any and all help.
First, make sure you are using the correct classname, img-responsive, currently in your html code, you are using img-responsive1 for your img elements.
after that, in your css change the max-width of img-responsive class to 100%
.img-responsive {
max-width: 100%;
height: auto;
}
to make sure that the image will fit to its container.
You can use this for you are image (whitout use bootstrap) :
img {
display: block;
max-width: 100%;
height: auto;
}
You can use it for one image like this :
#image_id {
display: block;
max-width: 100%;
height: auto;
}
note : we don't need bootstrap to do this.but if you want to tey with bootstrap you can do like this :
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>
When I look at my website "services" on an ipad landscape view, my services are going down one row. I have inspected the developer tools, and can see if I untick the bootstrap 33.3 %, each service will get 50%.
But I cannot see how I can get each one to fill 33.3%, when the bootstrap has defined it. I also defined how many col the div class should use. I looked through my CSS, and I do not have any padding, margin or so that should cause this.
<!-- begin services section -->
<section class="services">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-paper-plane-o"></i>
<h3>AutoPilotHQ</h3>
<p>
I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-tablet"></i>
<h3>Mautic</h3>
<p>
I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads.
</p>
</div>
</div>
</div>
</div>
</section>
CSS can be tricky.
The icon of service <i class="fa fa-paper-plane-o"></i> is set to float: left; and it brakes the layout.
Add this rule to fix it:
.service.small:after {
content: " ";
clear: both;
display: table;
}
Disabling the following CSS rule also repairs your layout (I am not sure why):
.services .service {
margin-bottom: 30px;
}
Trying to realize the above structure in my UI. A big picture and thumbnails below it.
I am using the grid components for it. Code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
</div>
</div>
Now I want to delete pictures out of Pics. That's why I introduce badges with the following code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
<span class="badge badge-assertive picture-thumbnail-badge"
on-tap="removePic($index)">
<i class="icon ion-ios7-close-empty"></i>
</span>
</div>
</div>
And this results in the following (with a css class moving the badges in the top left corner):
.picture-thumbnail-badge{
position: relative;
top:-60px;
right:65px;
z-index: 100;
}
The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow.
My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges?
Thanks in advance.
You need to move the .picture-thumbnail-badge out of the flow. For that, you can use position:absolute; instead of position:relative; :
.picture-thumbnail-badge{
position: absolute;
top:-60px;
right:65px;
z-index: 100;
}
(note that the parent needs to be positioned with position:relative;)
I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.
So on the left side, there should be an icon, and on the right side, there should be text.
I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.
Here is my code:
<div class="row">
<i class="span2 icon-user "></i>
<div value='register' class="span4">
Registrierung
</div>
<i class="icon-mobile-phone span2"></i>
<div id='Newsletter' class="span4">
Newsletter
</div>
</div>
<div class="row">
<i class="icon-euro span2"></i>
<div value='kost' class="span4">
Kosten
</div>
<i class="icon-phone span2"></i>
<div id='probleme' class="span4">
Probleme
</div>
</div>
As an update to this, FontAwesome now has fixed-width support built in.
<i class="fa fa-fw fa-user"></i>
The fa-fw class supplies the fixed-width style.
Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.
http://jsfiddle.net/LeBen/B9yjd/
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Why having empty elements if you only want a background image for an element?
Just add the icon as background-image and set the padding-left for all these elements to the required value.
Just target the icons classes directly adding your styles in css:
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
just had this issue playing around with the options after not wanting to bang all my FontAwesome icons in spans/divs. Adding class 'fa-fw' did indeed solve it, but so does simply adjusting the width of the icon with CSS (maybe a new thing as this is an old post), so no extra classes needed if you have many icons. 'svg-inline--fa' was a common class for all my icons - see example
.item{
padding: 5px;
}
.svg-inline--fa{
font-size: 20px;
width: 40px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<div class="item">
<i class="fas fa-bolt"></i>
Fast, local and friendly team
</div>
<div class="item">
<i class="fas fa-tags"></i>
Honest and transparent pricing
</div>
<div class="item">
<i class="fas fa-handshake"></i>
All our work is guaranteed
</div>
<div class="item">
<i class="fas fa-clipboard-check"></i>
Trained to the highest UK standards
</div>