Side-By-Side List Items as Icons Within a Div (Css)

Side-by-side list items as icons within a div (css)

Give the <li> float: left (or right)

They will all be in the same line until there will be no more room in the container (your case, a <ul>).

If you have a block element after the floating elements, it will also stick to them, unless you give it a clear: both;, OR put an empty div before it with clear: both;.

Align two div side by side using css, div contain dot icon and text

take the span out of the div put it side by side in a parent container like below:

.dot {   height: 12px;   width: 12px;   background-color: #bbb;   border-radius: 50%;   display: inline-block;}.user-values-color{  background-color: #1BBC9B;  float: left;}.default-values-color{  background-color: #2D3E50;  float: left;}.container {display: inline-block;}

<div class="container">    <div class="user-values-color dot" ></div>    <span style="float:left;">Value 1</span>  </div>   <div class="container">     <div class="default-values-color dot"></div>      <span style="float:left;"> value 2</span>   </div>

Css for displaying two elements side by side

You can use Bootstrap's (since you're using it) col-xx-xx classes to do this.

Demo Here

<div class="span1 col-xs-1">
<div class="span11 col-xs-11">

Bootstrap uses a 12 column system, so using 1 and 11 will make your icon 1 column and your text content the remaining 11, side-by-side.

How Do i Add these social media icons side by side without affecting anything?

Create a parent div which contains the icons and make that use flex.

.c-icon-flex{
  display: flex;
}

<h1 className="c-title">Wanna Discuss, Lets Connect</h1>
<div class="c-icon-flex">
  <div className="c-info">
    <div className="c-info-item">
      <img src={Mail} alt="Sample Image" className="c-icon" />
    </div>
  </div>
  <div className="c-info">
    <div className="c-info-item">
      <img src={Github} alt="Sample Image" className="c-icon" />
    </div>
  </div>
  <!--remaining icons here-->
</div>

How could I display these icons side by side and centered on the page?

here is a solution based on your css .. check the css section and those comments. sorry for my bad english.

.social { display:block;  /*need aside as a block element by default aside is  block */  text-align:center;/*text align center set the ul section to center ;*/}
.smicons {  background-color: transparent;  list-style-type: none;  border: none;   padding-left:0;/*ul element by default padding-left:40px;*/  padding-top: 15px;  display: inline-flex;/*inline-flex set those icon side by side */}

<aside class="social">  <ul class="smicons">    <li class="fbicon">      <a href="http://facebook.com"><img src="https://cdn2.iconfinder.com/data/icons/social-18/512/Facebook-3-128.png"></a>    </li>    <li class="twicon">      <a href="http://twitter.com"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png"></a>    </li>    <li class="yticon">      <a href="http://youtube.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-128.png"></a>    </li>    <li class="igicon">      <a href="http://instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-33/128/Instagram-128.png"></a>    </li>  </ul></aside>

Display two UL elements side by side, centered vertically and horizontally

If you need only one icon, you can use pseudo-elements::before for the bell

.error-message-container {
        border: 1px solid blue;
        bottom: 0;
        color: light-blue;
        font-size: 12px;
        left: 0;
        position: fixed;
        text-align: center;
        width: 100%;
}

.error-message-container .error-message-list {
  display: inline-block;
  font-weight: 500;
  line-height: 1.2;
  list-style-type: none;
  margin-bottom: 11px;
  margin-top: 11px;
  padding-left: 8px;
  position: relative; /** this provides reference to the ::before element **/
}

.error-message-list::before {
  content: "\f1f6"; /** refers to awesome font **/
  font-family: FontAwesome; /** refers to awesome font **/
  position: absolute; /** this will stick to error-message-list **/
  top: 50%; /** this will position the icon 50% height of the error-message-list **/
  margin-top: -10px; /** minus half the icon height to truely vertically centered **/
  left: -20px; /** this will push it to the left out the error-message-list **/
}

https://jsfiddle.net/b1rw80jz/6/

---

Related Topics