logo
down
shadow

Centering media object on page using Bootstrap


Centering media object on page using Bootstrap

By : user2954698
Date : November 22 2020, 10:31 AM
I wish this helpful for you It's not clear in what container you want to center the media object, I've assumed you want to center it in the entire screen.
The html, body and .outer container all get a height: 100% to make the .outer container take up the entire screen. The .outer container gets a position: relative to refer to its position/dimensions when positioning the .inner container. The .inner container gets a position: absolute to take it outside of the document flow (otherwise it takes up 100% of the screens width which is also the reason that the class .center-block didn't do anything) The top left of the .inner container gets moved to the center of the .outer container by adding top: 50% and left: 50% To move the .inner container back to the center of the screen we need to move it by half its width and height, this is done by the `transform: translate(-50%, -50%).
code :
html,
body {
  height: 100%;
}

.outer {
  position: relative;
  height: 100%;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="email" class="outer">
  <div class="media inner">
    <a class="media-left" href="#">
      <img src="http://placekitten.com/g/64/64" alt="...">
    </a>
    <div class="media-body">
      <h3 class="media-heading">mattkowalczykowski@gmail.com</h3>
    </div>
  </div>
</div>


Share : facebook icon twitter icon
Bootstrap Media Object - Fixing floated button wrap when media header is long

Bootstrap Media Object - Fixing floated button wrap when media header is long


By : Thomas Butzbach
Date : March 29 2020, 07:55 AM
I hope this helps you . I'm using Twitter Bootstrap's media object styling for our user profiles on a social network of sorts. Pretty standard layout: avatar/logo to the left, title and short description to the right (sorry, not enough rep to provide an image, but see jsfiddle below). , Add a clearfix class to h3.media-heading.
code :
<h3 class="media-heading clearfix">
Bootstrap Footer: Trouble Centering The Social Media Icons

Bootstrap Footer: Trouble Centering The Social Media Icons


By : Ariestoni Silalahi
Date : March 29 2020, 07:55 AM
this will help Because you're using the navbar-nav class you have to remove it's default float:left rule.
code :
.navbar-nav {
  padding: 40px 10px;
  float: none;
  text-align: center;
}
.row-footer {
  background-color: #AfAfAf;
  margin: 200px auto;
  padding: 20px 0px 20px 0px;
}
div.navbar-nav {
  padding: 40px 10px;
  float: none;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
  <div class="container">
    <div class="row-footer">

      <div class="row">
        <div class="nav navbar-nav">
          <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
          <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
          <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
          <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
          <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
        </div>
      </div>
    </div>

  </div>
</footer>
.row-footer {
  background-color: #AfAfAf;
  margin: 200px 0;
}
.footer-nav {
  text-align: center;
  padding: 40px 0;
}
.footer-nav a {
  display: inline-block;
  padding: 0 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="row-footer">
          <div class="footer-nav">
            <a class="btn btn-social-icon btn-google-plus" href="#">
              <i class="fa fa-google-plus"></i>
            </a>
            <a class="btn btn-social-icon btn-facebook" href="#">
              <i class="fa fa-facebook"></i>
            </a>
            <a class="btn btn-social-icon btn-linkedin" href="#">
              <i class="fa fa-linkedin"></i>
            </a>
            <a class="btn btn-social-icon btn-twitter" href="#">
              <i class="fa fa-twitter"></i>
            </a>
            <a class="btn btn-social-icon btn-youtube" href="#">
              <i class="fa fa-youtube"></i>
            </a>
            <a class="btn btn-social-icon" href="#">
              <i class="fa fa-envelope-o"></i>
            </a>
          </div>

        </div>
      </div>
    </div>

  </div>
</footer>
Centering columns using media queries bootstrap

Centering columns using media queries bootstrap


By : Vadim Yarovoy
Date : March 29 2020, 07:55 AM
hop of those help? I am trying to work on responsive web design, specifically on centering images that are within a column container when hitting screen size of 576px. I've tried this statement that I have seen elsewhere: , Give text-align: center to first-pic-container
code :
@media(max-width: 576px) {
        .first-pic-container {
            text-align: center;
        }
    }
Bootstrap centering icon on social media buttons

Bootstrap centering icon on social media buttons


By : Anam
Date : March 29 2020, 07:55 AM
wish helps you I have some social media icons using bootstraps font-awesome icons. My problem is that the icons are not centered. , You need to just add it .social-btns .btn{padding: 18px 18px;}
code :
.social-btns .btn{padding: 18px 18px;}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
How to make ellipsis media heading in second line using Bootstrap Media object

How to make ellipsis media heading in second line using Bootstrap Media object


By : user2911941
Date : March 29 2020, 07:55 AM
I wish this helpful for you How to make ellipsis media heading in the second line using Bootstrap Media object? , May be something like this using css
code :
.media-body h5 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

img {
  max-width: 50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="media">
  <img class="mr-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Blue_copyright.svg/250px-Blue_copyright.svg.png" alt="image">
  <div class="media-body">
    <h5 class="mt-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
    Description does here
  </div>
</div>
Related Posts Related Posts :
  • RouterLink is not working properly dynamically in angular 6
  • Simple HTML rendering issue
  • Best Approach to separate Form sections
  • How to Organize Phonegap HTML Files
  • Wrap a long single word using CSS
  • I am trying to implement a hover effect using CSS3 Transitions
  • How can I avoid hard coding line height while vertically centering element in a div?
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org