I have searched many threads here but could not find something more peculiar to my needs. I have a logo image 50x50px and h2 text element. I want to keep both elements side by side but in the absolute center of my header. I have tried various CSS techniques but cannot get it done. Below is simple bootstrap structure that I am trying to use:
<div class="container">
<div class="row">
<div class="col-md-12"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
Use this css
img + h1{
display: inline-block
vertical-align: middle;
}
remove positions whatever you added use only margin,padding, top, left, right bottom and use center tag after col-md-12 put both img and heading inside the center tag and also add class col-sm-12
Maybe you are looking for display:flex with align-items:center
.test{
display:flex;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 test"><img src="https://placeimg.com/50/50/nature" alt="LOGO">
<h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
</div>
</div>
Related
I´m trying to make the image below to fit the whole div, meaning that the background image should take the whole space and I shouldn't see the green color. Unfortunately I can´t find a way to do it.
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container no-padding" id="maincontent" tabindex="-1">
<div id="imagecontainer" class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
Many thanks!
Your using container, use container-fluid to make it full width. Here is a demo
The #maincontent div has a padding, a positive margin and a width set in pixels; and the #imagecontainer has a negative margin.
This is because that's the way Bootstrap deals to accomodate items in its grid.
You could considerate using a fluid Jumbotron instead to use the full width and take the necessary vertical space for your content.
This could be of help: https://v4-alpha.getbootstrap.com/components/jumbotron/
I use Bootstrap 3.3.7 and I wonder how to display:
Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline
Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Your problem is with the CSS, not the markup
The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.
The easiest way to fix this is to add
h1 {
margin: 0;
}
To your site's CSS.
Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.
Remove top margin from header element:
.page-header h1 {
margin-top: 0;
}
I need to make a logo in my footer responsive, and it should be centered. I thought I could solve it the following way with bootstrap:
HTML
<!-- Footer -->
<div class="container-fluid">
<div class="row">
<div class="landing img-responsive footer">
<div>
<img src="~/img/logo-white-small.png" />
</div>
</div>
</div>
</div>
CSS
.landing.img-responsive.footer {
margin: 0 auto;
}
But is that incorrect?
I would suggest you to use
<center><img src="~/img/logo-white-small.png" /></center>
or alternatively
<div style="text-align:center" class="img-responsive">
<img src="~/img/logo-white-small.png" />
</div>
Also check the space between .landing .img-responsive .footer between these classes in you css.
You can use:
img {
display: table;
margin: auto;
}
To center the image, while adding the .img-responsive class part of bootstrap to make it responsive.
https://jsfiddle.net/c79bstuu/
User img-responsive class for responsive image.
Use center-block class to horizontallyalign an element center.
<img src="~/img/logo-white-small.png" class="img-responsive center-block" />
it will make your image responsive as well as horizontally center aligned.
anyhow if you want vertically align then you should use display: table-cell for child div and display:table for parent div. You also need to remove float property from child div.
I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>
Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
The class pull-right is still there in Bootstrap 3
See the 'helper classes' here
pull-right is defined by
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN
when the page is wider than 990px - which is when the col-md styling kicks in,
Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-right only push the div to the right, but not the content inside the div.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
Bootstrap 4+ has made changes to the utility classes for this. From the documentation:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.
Add offset8 to your class, for example:
<div class="offset8">aligns to the right</div>